Adding background image which should fill page - html

Question

I'm using the following code to show a background image on my page:
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
#bg-pic > img {
width: 100%;
display: block;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" />
</div>
This works fine once the ratio of the browser window is wide enough. But in case I have a very small window I want the picture still to cover the page so instead of width: 100%; height: 100%; would be correct. How can I fix this?
EDIT: Since the provided answer don't solve my actual problem let's describe it using an example:
Let's assume my picture has dimensions 100x100 and my browser window has dimensions 200x100. Then only the upper 100 pixels are filled with the picture. What I want is that the whole browser window is filled by zooming into the picture (of course then the area on the right and on the left of the picture which corresponds to the right 25 and left 25 pixels of the picture is omitted).

Answer 1

Use the background property instead of an img element.
Demo:
body {
background: url('image.jpg') center center / cover;
}
jsfiddle
In your case:
html, body {
min-height: 100%;
}
body {
margin: 0;
background: url('bg.jpg') center center / cover;
}

Answer 2

You could use the object-fit and object-position properties on the image tag.
Codepen example
#bg-pic{
top:0px;
left:0px;
position: fixed;
opacity: 0.18;
z-index: -1;
margin: 0px;
width: 100%;
height:100%;
}
#bg-pic img {
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
}
You can read more about object-fit at CSS-Tricks : https://css-tricks.com/on-object-fit-and-object-position/

Answer 3

You just have to add height:100vh; in your img style tag,
You can't use height:100% because it won't be applied unless you have specified static height to parent div.
Always a better option to go for vh dimension.
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" style="width:100%; height:100vh; display: block;"/>
</div>

Answer 4

body { background-image:url("../images/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%; }
Try this

Answer 5

You can try flexbox like this:
#bg-pic {
top: 0;
left: 0;
position: fixed;
opacity: 0.5;
z-index: -1;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}
img {
min-width: 100%;
min-height: 100%;
flex-shrink: 0;
}
<div id="bg-pic"><img src="https://picsum.photos/800/800?image=1069" style="" /></div>

Answer 6

Try this, its cross browser compatible:
div {
position:relative;
}
img {
max-height: 100%;
max-width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
This assumes you have given a size to the div.

Answer 7

You might be looking for background-size: contain. Paired with height: 100vh should give you desired effect.
If you need the image centered horizontally you can add background-position: 50% 0% or background-position: center; for both horizontal and vertical centering.
#container-with-background {
background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg);
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
}
<div id="container-with-background">
</div>
If you need your images to be inside your <img> tags you can achieve the same effect with max-width: 100% and max-height: 100% on the <img> tag, and fixed height on the container - height: 500px for example. Setting the height to 100vh will make it fullscreen.
#container {
height: 100vh; /* Can be set to fixed value if needed */
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
<div id="container">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg">
</div>