CODEWITHSUNDEEP
css
merlin371
merlin371

Reputation: 514

CSS Background not showing

Hello I made this very simple CSS that should show the background image on a div, and it works on dreamweaver but not on any browsers at all, I really dont know why, was copy and paste from w3 school, where on their example it works on browsers as well here's the code.

#container{
    position:relative;
    background-image: url(../img/bottom_line_header.png);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:bottom;
}
.main_wrapper{
    width:1000px;
    position:absolute;
    top:30px;
    left:50%;
    margin-left: -500px;
}
.header_button{
    float:right;
    height:60px;
    width:130px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: right;
    margin-left: 5px;
    text-height:200%;
}

This is the HTML

<body>
<div id="container" class="main_wrapper">
<div id="container">
<div class="header_button">Contact us</div>
<div class="header_button">Media</div>
<div class="header_button">About us</div>
</div>
</div>
</body>

and btw just in case it comes up, the link to the image is correct :D

Upvotes: 0

Views: 1399

Answers (5)

blejzz
blejzz

Reputation: 3349

you didn't set the #container width/height and because u have floating elements in it the height doesn't expand. you have to clear the floats after the header_buttons.

     <div style='clear:both'></div>

And also the id tag has to be unique for every element.

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

Check to make sure the path is correct...

This

background-image: url(../img/bottom_line_header.png);

might need to change to this

background-image: url(/img/bottom_line_header.png);

or this

background-image: url(img/bottom_line_header.png);

Upvotes: 0

Sparkup
Sparkup

Reputation: 3754

Make sure the path is correct:

#container{
    position:relative;
    background:url(../img/bottom_line_header.png) bottom no-repeat;
}

In this case, you are moving out of the current folder into the img folder.

-www 
   -css  //say your style sheet is here.
   -img  //your image needs to be here.

Make sure #container has a height and an id is unique, you have 2 elements with the same id.

Upvotes: 0

shanethehat
shanethehat

Reputation: 15570

You are not setting any height, on your container, meaning that it's height will be defined by it's content. In this case, the content is all floated, and floated elements do not contribute to the height of their parent element.

Also, id attributes should be unique on a page, so having two elements with an id of container is incorrect.

Upvotes: 0

nfechner
nfechner

Reputation: 17525

You have used the id container twice in your HTML. IDs must be unique.

Upvotes: 1

Related Questions