How to insert an image in my html doc to serve as background image(background)

Asked

Viewed 15,260 times

1

Greetings. I would like to know how to insert an image in my html document so that it serves as background on my site. The image is on the desktop of my PC with the name "backg.jpg". Thank you.

html css

3 answers

0


Utilize CSS to achieve the pertendited result background-image: url(CAMINHO_DA_IMAGEM).

Find below an example of how to use CSS to insert a background image across 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 in a +/- like an actual web server environment.

Avoid creating projects directly from your desktop (Desktop).

0

css 

   body
    {
         background-image: url("caminho_da_imagem.extensao");
    }

0

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

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

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

And in css do the following:

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

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

Always watch where your files are and you will get much less confusion.

Browser other questions tagged html css

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