How to put a background image?

Asked

Viewed 25,659 times

3

I’m trying to put a background image but I’m not getting it. Can someone help me?

* {
    box-sizing: border-box;
    margin: 0;
	padding: 0;
}


body, html {
	width: 100%;
}

body {
	background-image: url("img/pizza.jpg");
	background-repeat: no-repeat;
}

nav#menu ul {
	list-style: none;
	text-transform: uppercase; 
}

nav#menu li {
	display: inline-block;
	background-color: #006400;
	padding:0,30%;
	margin: 5%;	
	transition: background-color 1s;
	
}

nav#menu li:hover {
	background-color:#32CD32; 
}

nav#menu a {
	color: #FFD700;
	text-decoration: none;
}
<!DOCTYPE html>
<html lag="pt-br">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" type="text/css" href="style/style.css">
        
      <title>Pizzaria Santa Tartaruga</title>
  </head>
    <body>
      <header>
              <div id="log"><img src="img/santatmnt.png" height="100" width="100" alt="Pizzari Santa Tartaruga" title="PIZZARIA SANTA TARTARUGA"></div>
              <h1><a href="">Pizzaria Santa Tartaruga</a></h1>
      </header>
    <div id="me">  
      <nav id="menu">
          <ul>
              <li id="ho"><img src="img/raphael.png" height="100" width="100" alt="Raphael" title="RAPHAEL"><a href="">Home</a></li>
              <li id="ca"><img src="img/michelangelo.png" height="100" width="100" alt="Michelangelo" title="MICHELANGELO"><a href="">Cardápio</a></li>
              <li id="po"><img src="img/leonardo.png" height="100" width="100" alt="Leonardo" title="LEONARDO"><a href="">Pedidos Online</a></li>
               <li id="co"><img src="img/donatello.png" height="100" width="100" alt="Donatello" title="DONATELLO"><a href="">Contato</a></li>
          <ul>
    </div>        
      </nav>
      <section>
          <h1> Venha curtir uma aventura ao lado das tarugas mutantes mais amadas do mundo!
              E o que não vai faltar nessa aventura é muita pizza!</h1>
      </section>  
      
      <footer>
             <div> Tel:(21)2243-5243(8hs ás 24hs)</div>
      </footer>
            .

html5 css3
  • 1

    Could you be more specific? Where do you want to place the image?

  • wanted to put the image in the background of the body

  • Apparently, there’s nothing wrong with your CSS. Make sure the image address is correct, and what happens without the background-repeat: no-repeat;

  • Missing close the Body tag, So it you can define how far it goes.

1 answer

3

Inferring through your import <link rel="stylesheet" type="text/css" href="style/style.css">, the style file is in the folder style. However, the images are in another folder: img.

It turns out that the parameter url in the definition of style background-image looks for the image based on the directory in which the CSS file is located.

If the folder img is not daughter of the folder style so that’s probably why the image is not being found, because the image is being searched on the way style/img/pizza.jpg.

If this is the case, to correct, you must change the url in the style setting to search from the correct folder.

For example, if the folder img is the sister of the folder style (ie, the two are in the same directory) then you can fix indicating that the image should be searched first by going up a level in the folder structure before entering the folder img, with ".. /" at the beginning of the url.

The final solution would be like this:

body {  
    background-image: url("../img/pizza.jpg");  
    background-repeat: no-repeat; 
}

Browser other questions tagged html5 css3

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