Centered full screen html image (not an image in css)
23,725
Solution 1
try this
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.myimg {
height: inherit;
}
</style>
<html>
<body>
<div class="fixed-background">
<img src="public/dbs/images/1.jpg" class="myimg" />
</div>
</body>
</html>
Solution 2
Use object-fit: cover; on the <img> tag:
<div>
<img src="photo2.jpg" style="object-fit: cover;"/>
</div>
that parameter is a rather new thing (not all browsers supported), but that's the way to go. See also http://caniuse.com/#search=object-fit
Author by
Dan
Updated on July 09, 2022Comments
-
Dan almost 2 years
I'm trying to have a full screen image, easy enough with css using the code below.
width:100%; height:100%; background: url('photo2.jpg'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;but the image is already placed in an html div, see here
<div class="fixed-background"> <img src="photo2.jpg"/> </div>It need's to be exactly how it would be using the css version, the only difference would be the image is called in html and not in the stylesheet.