the background-image for the pizza hut logo is not showing up-CodePudding

I've tried to make a pizza hut logo appear in the center of the navigation bar but the image does not appear can you please help.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
header{
margin:auto;
text-align:center;
}
li   {
display: inline-block;
list-style-type: none;
margin: 20px;
}
header nav ul li .logo a{
text-indent: -9999999px;
background-image:url("https://media.cnn.com/api/v1/images/stellar/prod/190625084159- 
20190625-pizza-hut-logo-new.jpg?q=x_3,y_0,h_1684,w_2993,c_crop/h_270,w_480");

}  
</style>
</head>
<body>
<header>
  <nav>
    <ul>
      <li>Home</li>
      <li>Menu</li>
      <li >
        <a href="index.html">pizza hut logo</a>
      </li>
      <li>About</li>
      <li>Location</li>
    </ul>
 </nav>
 </header>
 <section>
  <div>a</div>
  <div>b</div>
  <div>c</div>
 </section>
 <footer></footer>
 <script src="script.js"></script>
 </body>
 </html>

I've been trying to debug this for a while and I still could not find an answer.

CodePudding user response：

Your CSS selector is wrong. This:

header nav ul li .logo a

Should be this:

header nav ul li.logo a

By having the space between li and .logo, you're actually looking for child of li with the class of logo. What you actually want is li elements that have the class logo themselves, which is li.logo.

CodePudding user response：

I would set the background-image on logo and can use relative positioning to put it where you desire. Also, I set your li.logo to have margin: 0; Finally, ul elements have default margin at block-start and block-end of 1em. So I set your ul to margin: 0; so it doesn't appear offset. See the CSS changes I made below.

header{
margin:auto;
text-align:center;
}
li   {
display: inline-block;
list-style-type: none;
margin: 20px;
}
.logo {
  background-image: url('https://media.cnn.com/api/v1/images/stellar/prod/190625084159-20190625-pizza-hut-logo-new.jpg?q=x_3,y_0,h_1684,w_2993,c_crop/h_270,w_480');
  background-position: cover;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100px;
  height: 67px;
  position: relative;
  top: 30px;
  margin: 0;
}

ul {
  margin: 0;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
  <nav>
    <ul>
      <li>Home</li>
      <li>Menu</li>
      <li >
        <a href="index.html"></a>
      </li>
      <li>About</li>
      <li>Location</li>
    </ul>
 </nav>
 </header>
 <section>
  <div>a</div>
  <div>b</div>
  <div>c</div>
 </section>
 <footer></footer>
 <script src="script.js"></script>
 </body>
 </html>

CodePudding user response：

Something like this?

UPDATE: I'll explain what i did, since it seem that the comments that i made in the CSS aren't enough.

You can structure HTML elements using flex, in this case, we made all li items display in a row, spaced around.

Also, using margin-bottom: auto; and margin-top: auto; we ensure that the text inside the li elements is vertically centered.

And, instead of setting the image as a background image, because that would force the image to get the width and height of the li element's content, we can set the image using a img tag, inside an a element, this way we make the image a linked image.

Also, We tell the image to get the 100% of the parent width, in this case the li 20%'s width.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>

   ul {
    /* Flex is an easy way to structure html elements using css, google it! :D*/
    display: flex;
    flex-direction: row;
    justify-content: space-around;
   }
   
  li {
    text-align: center;
  
    /* Margin top and bottom both to auto centers the text vertially */
    margin-top: auto;
    margin-bottom: auto;
    width: 20%;
    list-style-type: none;
  }
  
  .logo {
    /* We tell the image to get the 100% of the parent width, in this case the li 20%'s width */
    width: 100%;
  }
  
</style>
</head>
<body>
<header>
  <nav>
    <ul>
      <li>Home</li>
      <li>Menu</li>
      <li>
        <a href="index.html">
           <img  src="https://media.cnn.com/api/v1/images/stellar/prod/190625084159-20190625-pizza-hut-logo-new.jpg" />
        </a>
      </li>
      <li>About</li>
      <li>Location</li>
    </ul>
 </nav>
 </header>
 <section>
  <div>a</div>
  <div>b</div>
  <div>c</div>
 </section>
 <footer></footer>
 <script src="script.js"></script>
 </body>
 </html>