Inserare imagine fundal, background HTML, html

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.

Sintaxa:
<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>