How to put a background image?

Question

How to put a background image?

Navigation

#1 by (3 votes)

3

I'm trying to put a background image but I can not. 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

asked by anonymous 10.07.2015 / 00:47

1 answer

Ajax and php protection Is it possible to use min, max and step in CSS?

score 3 · Answer 1

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

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

If the img folder is not the daughter of the style folder then that is probably why the image is not being found because the image is being searched in the > style / img / pizza.jpg .

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

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

The final solution would look like this:

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