www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Bckgrd Images with CSS - best format?

Hybrid View

  1. #1
    Join Date
    Sep 2011
    Posts
    5

    resolved [RESOLVED] Bckgrd Images with CSS - best format?

    I would like to make my webpage's background look like the one here: http://ashleyfordsales.com/

    Let me first say that I am very new to HTML and CSS, most of my answers I am able to find by surfing through free tutorials and watching videos, right now I am trying to get my style sheet together.

    My first question is, is the background an image? I figured that this was an image because of the "gradient like" strip in the middle.
    If it is an image, what is the best format to save the file and what size should I aim to make it? I am concerned about making it too big and therefor not be loadable on some user's screens.

    Now, on to my second question, Here is my code so far (both html and css), as of right now, I just stuck a simple background color in. Im struggling a little bit, and I can't figure out how to make the nav links be to the left of the main content, I recently redid my code to do away with tables, but I am wondering If I need to make one there.
    Thanks in advance for any help =)
    This is my HTML code:
    <html>
    <head><title>Krystle Kleen Auto Sales - Home Page</title>
    <link rel="stylesheet" href="teststyle.css"/>
    </head>
    <body>
    <div id="wrap">
    <div id="banner">
    <img src="http://i1099.photobucket.com/albums/...graybckgrd.jpg" border="2">
    </div>
    <div id="left_nav">
    <ul class="navbar"><li><a href="inventory.html">Inventory</a> <br><br><li><a href="maps.html">Find Us!</a></li></ul>
    </div><!--end left_nav-->
    <div id="content">
    Welcome to Krystle Kleen Auto Sales!<br><br>Check back often to see our ever changing inventory and any specials we are running, to be updated weekly!<br><br>
    Come to a place you can trust, to <i>people</i> you can trust for the vehicles you need!<br><br>Browse through our links to the left to see our inventory and find out where we are.
    </div><!--end content-->
    </div><!--end wrap-->
    </body>
    </html>
    And this is the corresponding CSS code:
    /* teststyle.css - new format trial */
    body {
    margin-left: 10%; margin-right: 10%;
    color: white; background: rgb(51, 102, 0);
    #banner { align:center; }
    #left_nav { text-align:left;
    font-family: Arial, Helvetica, sans-serif;
    :link { color: white; } /* for unvisited links */
    :visited { color: white; } /* for visited links */
    a:active { color: white; } /* when link is clicked */
    a:hover { color: white; } /* when mouse is over link */
    }
    #content { text-align:center; color:white; }

    }
    Thanks to everyone who is able to take a look and help out.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Yes, it is an image. It is a .JPG, 1x537 px. It is set as a repeated (on x axis) background using a CSS class for the body element.
    Code:
    body {
        background: url("http://ashleyfordsales.com//images/bgimage.jpg") repeat-x scroll 0 0 #2E4382;
    }
    More about CSS background:
    http://www.w3schools.com/css/css_background.asp
    http://reference.sitepoint.com/css/background

    This kind of gradient image should be created either as .PNG format or as .JPG format

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles