CODEWITHSUNDEEP
htmlcss
user4630
user4630

Reputation: 633

img behaving like a background img?

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?

Upvotes: 9

Views: 5706

Answers (3)

luiges90
luiges90

Reputation: 4598

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

Demo: http://jsfiddle.net/SPsRd/1/

Upvotes: 1

user1746468
user1746468

Reputation: 85

The right way to use it is:

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

Upvotes: 0

wakooka
wakooka

Reputation: 1428

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>

Upvotes: 3

Related Questions