Inserare imagine fundal, background HTML
În HTML, putem adăuga cu ușurință imaginea de fundal în documentul HTML care urmează să fie afișat pe o pagină web folosind următoarele două metode diferite:
Utilizarea atributului Background (Etichetă HTML)
Utilizarea unei foi de stil interne
Dacă dorim să adăugăm imaginea de fundal în documentul HTML folosind atributul Background, atunci trebuie să urmăm pașii de mai jos. Folosind acești pași, putem vizualiza cu ușurință o imagine pe o pagină web:
În primul rând, trebuie să tastăm codul HTML în orice editor de text sau să deschidem fișierul HTML existent în editorul de text în care dorim să utilizăm atributul de fundal.
<body background="image_fisier.jpg">
Exemplu:
Puteți încerca să rulați următorul cod pentru a observa imaginea pe fundal
<!DOCTYPE html>
<html>
<head>
<title>Inserare imagine fundal, background HTML - example</title>
</head>
<body background="https://www.agernic.com/uploads/css-background-image-size-fit-full-screen.jpg">
<h2>Inserare imagine fundal, background HTML</h2>
<p>Inserare imagine fundal, background HTML</p>
</body>
</html>
Utilizarea unei foi de stil interne pentru inserare imagine fundal HTML
Folosirea foii de stil (<style>) CSS intern.Dacă dorim să adăugăm imaginea de fundal în documentul HTML folosind CSS intern, atunci trebuie să urmăm pașii de mai jos.
Folosind acești pași, putem vizualiza cu ușurință o imagine pe o pagină web, exemplu:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS background image size to fit full screen responsive - how to create - example</title>
<style>
body {
/* Location of the image for page */
background-image: url(https://www.agernic.com/uploads/css-background-image-size-fit-full-screen.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
h1,h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
#container { width: auto; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
</style>
<head>
<body>
<div id="container">
<h1>CSS background image size to fit full screen - how to create - example</h1>
This is a way to add background image for a web page using html. <br />
In this case I used:<br />
<strong>html</strong>
to cover the entire background. <br />
</div>
<html/>
</body>
This tool makes it easy to create, adjust, and experiment with custom colors for the web.

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

Find here examples of creative and unique website layouts.

Find here examples of creative and unique website CSS HTML menu.