CODEWITHSUNDEEP
htmlcssbackgroundbackground-image
user3150191
user3150191

Reputation: 415

How do I add a background image on my DIV tag with CSS

I'm trying to set my DIV with a background image, but it's not working for me. The image isn't showing up at all. I can't seem to figure out what I'm doing wrong.

Here is my code:

<div id="main_wrapper">
        <div id="main_content">
        </div>
</div>

In the above code, the DIV with the id "main_wrapper", i'd like to have the image I'm using fill up 100% of the screen, and the DIV with the id "main_content" I'd like to have a solid color, centered with only 1200px wide.

Here is my CSS:

#main_wrapper{
    background-image: url('img/bar_bkgnd.png');
    width: 100%;
    height: auto;
    max-width: 1920px;
}

#main_content{
    background-color: #000000;
    height: 800px;
    width: 1200px;
}

If anyone can help me with this issue, that would be very helpful. Thank you for your time!

Upvotes: 1

Views: 25609

Answers (4)

eapo
eapo

Reputation: 1081

Just check the working example: http://jsfiddle.net/8hP4h/

#main_wrapper should be bigger than #main_content and try to not use fixed size.

you can use more effective em, %, auto and others..

Upvotes: 1

Edward
Edward

Reputation: 79

In your #main_content, add the following:

 margin: auto;

Upvotes: 0

T McKeown
T McKeown

Reputation: 12847

try this for the image size:

#main_wrapper{
 background: url("img/bar_bkgnd.png");
 background-size: 100% 100%;  // or cover like Ben Dyer states
 background-repeat: no-repeat;
}

Upvotes: 1

Ben Dyer
Ben Dyer

Reputation: 1656

You need to add background-size:cover to #main_wrapper. That should do what you're looking for.

Upvotes: 3

Related Questions