CODEWITHSUNDEEP
csshtmlbackground-imageimage
Jayyrus
Jayyrus

Reputation: 13051

How to set a background image in full size of a div that doesn't fill page

i need to put an image in background of a div at the center position of it, like: Example

What i've tried is:

<div id="container">
    ...
</div
<div id="background">
    <img src="images/bg.png"/>
</div>

with this css:

div#container {
    margin: 0 auto;
    width: 52em;
}
div#bg img {
    z-index: -999;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 22%;
}

In my browser, with my screen size, i put 22% and all is ok, but if i try on another screen with different size background img isn't in the center of div. What can i do? can someonehelp me?

Upvotes: 0

Views: 3535

Answers (3)

Bhuvan Rikka
Bhuvan Rikka

Reputation: 2703

Give 

position:relative;

in the container div..It should work.. And the background div(with position:absolute;) should be a child of container div..then only u'll get the div overlapping property

Upvotes: 3

Dima Daron
Dima Daron

Reputation: 568

in css3 you can use #container { background-size: auto; }

Upvotes: 0

Suresh Sharma
Suresh Sharma

Reputation: 1844

can use css as below:

#sample
{
    background:url(bg_apple_little.gif) no-repeat center center;
    height:200px;
    width:200px;
}

& you div would be with id="sample". height, width can be varied as per your requirement.

Upvotes: 0

Related Questions