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>