Why is the background image not showing?

HTML & CSS
1

HTML

<body>
   <div class="bg"></div>
   <div>
     <header>
         <nav class="homenav">
           <div class="wrapper">
           <h2><a href= "index.html">RH</a></h2>
           <ul>
             <li><a href="contact.html">Contact</a></li>
             <li><a href="about.html">About</a></li>
             <li><a href="work.html">Work</a></li>
           </ul>
         </div>
         </nav>
     </header>
 <main>
   <div class="herotext">
    <h1>UI/UX Designer</h1>
    <h3>Bringing my visions to life<br>through the lens of the user</h3>
   </div>
 </main>
 <footer>
   <div id="copyright" class="wrapper">
   Copyright © RH<br>
  </div>
</footer>
 </div>
</body>

CSS

.bg {
  background-image: url('ux background.jpg');
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
2

Possibly an obvious question, but…
why not just apply the background to the <body> element?

3

A couple more reasons:

  1. background-image URL has a space in the URL file name
  2. the image may not be in the same path
  3. the div background image is not displaying because it has no height, Try adding a couple of line-breaks or set a div height.
1 Like
4

Most likely there is not a height set on the .bg div’s parent, the body.

You have height:100%; set in the rules. Percentage heights like that refer to the parent element to base the height on.

100% of what? Is what the browser will ask.

Otherwise it’s an empty div with no height and no bg image.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.