How to insert an image in my doc html so that it serves as background image (background)

1

Best regards. I would like to know how to insert an image into my html document so that it serves as background on my site. The image is found on my PC's desktop under the name "backg.jpg". Thanks.

    
asked by anonymous 26.01.2017 / 09:10

3 answers

0

Use CSS to achieve the desired result background-image: url(CAMINHO_DA_IMAGEM) .

Find below an example of how to use CSS to insert a background image throughout the page.

<!DOCTYPE html>
<html>
  <head>
   <title>Teste de imagem de fundo</title>
   <style>
          body{
             background-image: url(http://www.planwallpaper.com/static/images/Alien_Ink_2560X1600_Abstract_Background_dh8LV2F.jpg); /*caso a sua imagem de fundo se encontre no mesmo diretorio use apenas background-image:url(backg.jpg) */
             background-size: cover; /*caso nao pertenda utilizar htm5 substitua 'cover' por 100%*/
             background-repeat: no-repeat; /*previne que a imagem se repita ao longo da pagina*/
          }
   </style>
  </head>
  <body>
  </body>
</html>

Consider using a virtual server, for example XAMPP to create your projects on a +/- environment similar to a real web server.

Avoid creating projects directly from your Desktop.

    
26.01.2017 / 10:18
0

css

   body
    {
         background-image: url("caminho_da_imagem.extensao");
    }
    
26.01.2017 / 13:39
0

When I started I had difficulty understanding how to reference images and files, if you are using windows and the image is on the desktop you will do more or less this, c:\usuarios\seu-usuario\desktop\nome-imagem.jpg do not do this!

I advise using the image in the same folder as the index.html, you can do the following structure:

  • folder-project-name /
    • index.html
    • estilo.css
    • img /
      • bg.jpg

And in css do the following:

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

As you can see in css we call bg.jpg inside the img folder

Always notice where your files are and you will have much less confusion.

    
26.01.2017 / 14:56