I have a problem with a div. Her name is
<div id="content-homepage">
It happens that this div has some content inside (texts, titles and a button), and when I insert the image through
#content-homepage {
background-image: url(../img/back.jpg);
height: 100%;
width: 100%;
width: auto;
}
The image does not appear. I wanted it to appear and stay on the whole screen. Regardless of the device, it would fit and stay across the screen.
Your problem is that you put 100% of the height in the div , but 100% of that? For the code rendering with a height in%, the parent must have a height. So if your div is a direct child of body put 100% of ance in body , so div will have 100% of parent height to understand.
If your CSS stays that way it will probably work. And notice that I put background-size: cover; this will cause the image to cover the entire contents of div 100% x 100%
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#content-homepage {
background-image: url(https://placecage.com/300/180);
height: 100%;
width: 100%;
background-size: cover;
}<div id="content-homepage"></div>Friend, try this.
#content-homepage {
margin-top: 0%;
background-image: url(../img/back.jpg);
background-size: contain;
background-position: center;
height: fit-content;
width: 100%;
width: auto;
}
You should enter the image path in double quotation marks, so your CSS would look like this:
#content-homepage {
background-image: url("../img/back.jpg");
height: 100%;
width: 100%;
width: auto;
}
Try using
height: 100vh;
Instead of
height: 100%;
Could you please send us your css?