Background image problem in div

Asked

Viewed 1,175 times

1

I have a problem in a div. Her name is 

<div id="content-homepage">

It turns out that this div has some contents inside (texts, titles and a button), and when I insert the image through the

#content-homepage {
    background-image: url(../img/back.jpg);
    height: 100%;
    width: 100%;
    width: auto;
}

The image doesn’t appear. I wanted it to appear and be on the whole screen. Regardless of the device, that it fits and is on the entire screen.

html5 css3 div background

  • Gabriel put a value of antura for this div #content-homepage guy height: 50px; and see if the image appears. Or put a text inside the div to have it in. Another thing, check if the extension of your image is even JPG or if it is PNG or GIF for example

  • The image really is JPG. I put height and width, and it now appears, but not on the whole screen.

  • Dude I think I understand your problem then. Take a look at the answer there and test there to see if it’s your problem. When it comes to leaving a comment there I’ll give you a boost

3 answers

0

Hey, buddy, 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;

}

  • Does not appear. Only the items inside the div, nothing else.

  • Could provide an image ?

0


Dude your problem is that you put 100% height on div, but 100% of what? For code to render with a height in % it is necessary that the parent has a height. So in case your div is the direct daughter of body put 100% antura on body, thus the div will be 100% of the father’s height understand.

If your CSS looks like this it will probably work. And notice that I put background-size: cover; this will cause the image to cover the entire content 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>

  • 1

    It worked perfectly! Thank you very much, Hugo.

  • @Gabrielmarinho dmr the main explanation is, will help you in other situations. especially when using height in %

-1

Try to use

height: 100vh;

Instead of

height: 100%;

Could send your css?

  • It worked! But keeps showing the scrollbar on the page. Will the margin/edge of other items?

  • This means that your div is pulling the size of her paternal div, which should be 0, when you use the port height view you arrow the size of the div as if it were the pixels of the screen by its height, try to put the property height:100% on the parent div that you’re using as background. if you have no parent div use the height: 100% property in body and html

  • paste this code at the top of your css. body,html{height:100%;} , and use height:100% again, on the div you want the background to.

  • https://codepen.io/AntonioBan/pen/aQeWVz

Browser other questions tagged html5 css3 div background

You are not signed in. Login or sign up in order to post.