Menu
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?
289
asked Nov 16 '12 12:11
The img could also use object-fit: cover; to replicate a background image with background-size: cover; . You can play with the absolute positioning properties top , right , bottom , left . In combination with setting the min-width and max-width to 100% instead of the width and height .
Img Tag. It is widely known that using the image tag is better SEO practice than using background images because of the screen reader implications.
#The difference between HTML images <img> and CSS background images. The HTML <img> element is for images that are part of the content, while CSS background images are purely decorative.
The background-repeat property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally. Tip: The background image is placed according to the background-position property.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
