img behaving like a background img?

Question

I have a physical image on a page..

<img src="image.png" alt="image-name" />

I want it to behave as if it was the body background image though..

body{
background: url(image.png) no-repeat center top;
}

i.e centered without the browser seeing it, so no scroll bars if its wider the the browser etc?

Is this possible?

is the image always centered? – luiges90 Nov 16 '12 at 12:34 — luiges90, Nov 16 '12 at 12:34

score 3 · Answer 1 · answered Nov 16 '12 at 12:39

3

Yes it is possible, you'll probably have to do something like this :

CSS

#your-image {
    position: absolute;
    z-index:1;
}
#container {
    position: relative;
    z-index: 2;
}

HTML

<body>
    <img id="your-image src="" alt="">
    <div id="container">
        <!-- All your content goes there -->
    </div>
</body>

answered Nov 16 '12 at 12:39

wakooka

1

If you change "z-index:1" to "z-index:-5000", it really works!:) thank you!:) – StepUp Dec 06 '14 at 02:05

score 1 · Answer 2 · edited May 23 '17 at 12:17

Is position: fixed; z-index: -5000 what you want?

position: fixed make the image always fixed on a certain position on the browser regardless of the content.

z-index: -5000 just put the image behind everything

To make it centered I think you need to know the size of image beforehand. If you do, add

top: 50%; 
left: 50%;
margin-top: -100px;
margin-left: -250px;

Where 100 is half your image's height, and 250 is half your image's width. Taken from Center a position:fixed element

score 0 · Answer 3 · answered Nov 16 '12 at 12:41

0

The right way to use it is:

  body { background-image:url(image.png) no-repeat center top;}

answered Nov 16 '12 at 12:41

user1746468

3 Answers3