Background image not showing up in div
Question
My background image won't show up in the div I want to display in. However, it shows up if I put it in other elements. For example, I put it in the body element and it showed up just fine, but it won't display in the div I want it to. Can you check my code and see what I'm doing wrong. I double checked my file path and also the file type, and it's all fine. So, I'm not being able to figure out what I'm doing wrong.
HTML:
<body>
<header>
<div class = "container container-flex">
<div class = "title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Profiles</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
</div>
</header>
<div class = "container container-flex">
<main role = "main">
<div class = "image">
</div>
</main>
</div>
</body>
CSS:
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
header{
padding: 1em 0;
text-align: center;
}
@media (min-width: 675px){
.container-flex{
flex-direction: row;
}
}
nav ul{
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li{
margin-left: 2em;
}
nav a{
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1{
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
@media (max-width: 675px){
nav ul{
flex-direction: column;
}
nav li{
margin: .5em 0;
}
}
.image{
background-image: url('logo.jpg');
}
5 answers
solution1
4 2021-07-22 10:37:43
This is because you are trying set background image in an empty element, which has 0 height. Set specific width/height of the element.
body{ margin: 0; font-size: 1.125rem; font-weight: 400; } .container{ width: 90%; max-width: 900px; margin: 0 auto; } .container-flex{ display: flex; flex-direction: column; justify-content: space-between; } header{ padding: 1em 0; text-align: center; } @media (min-width: 675px){ .container-flex{ flex-direction: row; } } nav ul{ list-style: none; padding: 0; display: flex; justify-content: center; } nav li{ margin-left: 2em; } nav a{ text-decoration: none; padding: .25em 0; font-family: 'Ubuntu', sans-serif; color: black; font-size: 1.3rem; color: #575252; } h1{ font-size: 2.75rem; margin: 0.1em; font-family: 'Merriweather', serif; color: #FF344B; } @media (max-width: 675px){ nav ul{ flex-direction: column; } nav li{ margin: .5em 0; } } .image{ background-image: url('https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj'); height: 10em; background-size: contain; background-repeat: no-repeat; }
<header> <div class = "container container-flex"> <div class = "title"> <h1>PRODUCE</h1> </div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Groups</a></li> <li><a href="#">Profiles</a></li> <li><a href="#">Gallery</a></li> </ul> </nav> </div> </header> <div class = "container container-flex"> <main role = "main"> <div class = "image"> </div> </main> </div>solution2
2 2021-07-22 10:39:50
Your div has no content. Either give some content or if that does not agree with your current design, give explicit height and width.
.image{ width: 200px; height: 200px; background-image : url('https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg'); } .image2{ background-image : url('https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg'); }
<div class="image"></div> <div class="image2"></div>
solution3
2 2021-07-22 10:42:24
You need to add width , height , and background-size properties to the .image .
body { margin: 0; font-size: 1.125rem; font-weight: 400; min-height: 100vh; } .container { width: 90%; max-width: 900px; margin: 0 auto; } .container-flex { display: flex; flex-direction: column; justify-content: space-between; } header { padding: 1em 0; text-align: center; } @media (min-width: 675px) { .container-flex { flex-direction: row; } } nav ul { list-style: none; padding: 0; display: flex; justify-content: center; } nav li { margin-left: 2em; } nav a { text-decoration: none; padding: .25em 0; font-family: 'Ubuntu', sans-serif; color: black; font-size: 1.3rem; color: #575252; } h1 { font-size: 2.75rem; margin: 0.1em; font-family: 'Merriweather', serif; color: #FF344B; } @media (max-width: 675px) { nav ul { flex-direction: column; } nav li { margin: .5em 0; } } .container:nth-child(2){ height: 250px; /* set the height here */ } main{ width: 100%; height: 100%; } .image { height: 30%; width: 30%; background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Disk_pack1.svg/1200px-Disk_pack1.svg.png'); background-size: cover; }
<body> <header> <div class="container container-flex"> <div class="title"> <h1>PRODUCE</h1> </div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Groups</a></li> <li><a href="#">Profiles</a></li> <li><a href="#">Gallery</a></li> </ul> </nav> </div> </header> <div class="container container-flex"> <main role="main"> <div class="image"> </div> </main> </div> </body>
Edit: You need to set the height on the second .container class. Because of no height, the relative units didn't work. Also, you need to set the height and width on parent ( main ) element of .image .
solution4
0 2021-07-22 11:03:57
As mentioned in answers by other users, your div element is empty and will sit on your page with effectively height: 0px; and width: 0px; properties.
To combat this, you should add a width property to your .image div in your stylesheets.
You can either then control the height of the image div with the height property, or alternatively you could use padding-bottom to give a more responsive twist to your styling, since padding-bottom: x% is a percentage of the element's width.
For example, adding:
.image { background-size: cover; background-position: center; background-repeat: no-repeat; padding-bottom: 100%; width: 100%; }
would create a square image that will stay responsively square as the page width, and therefore the width of the div.iamge element shrinks. The padding value can be played around with to get the right height for the element that you desire.
UPDATE
body{ margin: 0; font-size: 1.125rem; font-weight: 400; } .container{ background-color: red; width: 90%; max-width: 900px; margin: 0 auto; } .container-flex{ display: flex; flex-direction: column; justify-content: space-between; } .image-wrapper { width: 75%; } .image { background-color: green; height: 0; padding-bottom: 100%; } .container { color: white; padding-bottom: 16px; } .center-image { margin: 0 auto; }
<body> <header> </header> <div class="container"> container <main role="main"> <div class="image-wrapper center-image"> <div class="image"> <span>image</span> </div> </div> </main> </div> </body>
solution5
0 2021-07-22 12:02:59
in your code if you setting an image in div tag it is should have a height and weight. This is another way to add images in your application with responsive.
body{ margin: 0; font-size: 1.125rem; font-weight: 400; } .container{ width: 90%; max-width: 900px; margin: 0 auto; } .container-flex{ display: flex; flex-direction: column; justify-content: space-between; } header{ padding: 1em 0; text-align: center; } @media (min-width: 675px){ .container-flex{ flex-direction: row; } } nav ul{ list-style: none; padding: 0; display: flex; justify-content: center; } nav li{ margin-left: 2em; } nav a{ text-decoration: none; padding: .25em 0; font-family: 'Ubuntu', sans-serif; color: black; font-size: 1.3rem; color: #575252; } h1{ font-size: 2.75rem; margin: 0.1em; font-family: 'Merriweather', serif; color: #FF344B; } @media (max-width: 675px){ nav ul{ flex-direction: column; } nav li{ margin: .5em 0; } } .image img{ width: 100%; height: auto; }
<html lang="en"> <head> <meta charset="utf-8"> <title>Page Title Goes Here</title> <meta name="description" content="Description Goes Here"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class = "container container-flex"> <div class = "title"> <h1>PRODUCE</h1> </div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Groups</a></li> <li><a href="#">Profiles</a></li> <li><a href="#">Gallery</a></li> </ul> </nav> </div> </header> <div class = "container container-flex"> <main role = "main"> <div class = "image"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" alt="Smiley face"> </div> </main> </div> <script src="js/scripts.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.