img behaving like a background img?

2018-06-27 02:42:45

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;
}

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

Is this possible?

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>

Is position: fixed; z-index: -5000 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/

正确的使用方法是：

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

链接地址: http://www.djcxy.com/p/75802.html