www.webdeveloper.com
Results 1 to 4 of 4

Thread: #header

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    2

    #header

    Okay so what I am doing is taking my logo banner image and taking it out of my <h1><img src> tags and moving it to my CSS style sheet using the #header like the mark up below:
    #header{
    display: block;
    background-image:url(img/javalogo.gif);
    height: 117px;
    background: #ccaa66;
    color: #000000;
    text-align: center;
    margin: 0;
    }
    This is just the code from my stylesheet, but it will not work, however the rest of the styles work so the link from my index.html page is good. What am I doing wrong here?

  2. #2
    Join Date
    Aug 2006
    Posts
    1,943
    I can only guess the logo is not referenced appropriately relative to the location of the style sheet. What does the directory structure look like?

    Dave

  3. #3
    Join Date
    Feb 2013
    Posts
    16
    Like tacknut, I'm guessing it might be the path to the image relative to the stylesheet. Is the CSS in a separate text file in a sub-folder? If so, you need to dig up out of the sub-folder by proceeding the image path with 2dots slash ../img/javalogo.gif.

    I don't have info about using quotes about the image name in background-image: url("img/javalogo.gif") -- the image path/name used to be unquoted in this usage, now I'm seeing examples where it is "quoted" (like a string used in the IMG tag, etc.) See http://www.w3schools.com/css/css_background.asp

    Also not specifying background-repeat, just defaults to repeat tile.

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    I image the relationship between the image folder and the CSS file is different than when you used the path directly on the HTML file:

    CSS...
    Code:
    #header {
    width: XXXpx; height: 117px;
    margin: 0 auto;
    background: #ccaa66 url(../img/javalogo.gif) no-repeat center scroll;
    }
    Just make sure you have correct width/height for header container. The "../" is just telling browsers how many directories to backup to to find the image. Correct as needed. If a tiled image, change CSS rules as needed.

    HTML...
    Code:
    <div id="header"></div>
    As easy as that! Just place where you want header to appear on page.

    Absolute and Relative Paths: http://webdesign.about.com/od/beginn.../aa040502a.htm

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