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

Question

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?

Bhuvan Rikka · Accepted Answer · 2012-07-07T08:09:26.307

3

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

edited Jul 07 '12 at 08:09

answered Jul 07 '12 at 07:38

Bhuvan Rikka

2,683
1
17
27

score 0 · Answer 2 · edited Jul 07 '12 at 07:36

0

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.

edited Jul 07 '12 at 07:36

Musa

96,336
17
118
137

answered Jul 07 '12 at 07:34

Suresh Sharma

1,826
22
41

http://stackoverflow.com/questions/4280886/css-background-image-larger-than-div-itself as you can see here, a background image could not overflow a div – Jayyrus Jul 07 '12 at 07:39
but it would fill only its own area as centered. – Suresh Sharma Jul 07 '12 at 09:17

score 0 · Answer 3 · answered Jul 07 '12 at 08:06

0

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

answered Jul 07 '12 at 08:06

Dima Daron

548
1
7
21

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

3 Answers3