AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

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>

 

inserare imagine fundal html
aliniere imagine html
imagine html efecte imagini
chenar, culoare bordura
Tags: imagine html link, de fundal, background, aliniere imagine html, centrare, bordura, marime

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


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


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


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


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


analytics piwika