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.
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.
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.
css
body
{
background-image: url("caminho_da_imagem.extensao");
}
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:
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.