Fundalurile HTML pot fi create cu valori de culoare sau cu un fișier imagine. Alegerea fundalului potrivit poate îmbunătăți designul site-ului dvs. web, asigurând în același timp că conținutul rămâne clar și ușor de citit.

Ce sunt fundalurile HTML?

Zona din spatele conținutului unei pagini web este denumită fundal HTML. Aceste fundaluri pot fi setate la crearea unei pagini în HTML. De asemenea, ele pot fi modificate ulterior, după cum este necesar. În mod implicit, fundalurile HTML sunt albe. Modificarea acestora este recomandată nu numai pentru a îmbunătăți designul unui site web, ci și pentru a îmbunătăți vizibilitatea conținutului.

Cum se poate modifica fundalul HTML?

Există două modalități principale de a proiecta fundaluri HTML:

  • aplicând o valoare de culoare
  • utilizând o imagine sau un gradient

Aceste valori sunt setate prin atributul HTML style. În secțiunile următoare, vă vom prezenta ambele metode.

Definirea fundalurilor HTML după valoarea culorii

Pentru a schimba culoarea fundalului HTML, utilizați atributul style și proprietatea background-color sau bgcolor. Există trei opțiuni diferite pentru specificarea valorii culorii:

  • Numele culorii: Aveți opțiunea de a seta culoarea dorită folosind pur și simplu numele acesteia. În plus față de culorile standard, cum ar fi red, yellow sau green, sunt posibile și culori speciale, cum ar fi lightblue sau deepskyblue. Majusculele și minusculele nu contează atunci când specificați culoarea.
  • Codul hexadecimal al culorii: Puteți specifica culorile și utilizând numărul hexadecimal din șase cifre. Acesta este format din trei perechi compuse din cifrele 9 și literele f. Prima pereche reprezintă valoarea roșu, a doua reprezintă verde, iar a treia reprezintă albastru, 00 fiind valoarea cea mai mică și ff cea mai mare. De exemplu, albastru ar fi 0000ff.
  • Valoarea RGB: Alternativ, puteți utiliza valoarea RGB, care este, de asemenea, baza codului hexadecimal al culorii. Valorile variază de la 0 la 255 și corespund culorilor roșu, verde și albastru. De exemplu, albastrul ar fi RGB (0, 0, 255).

Sintaxa pe care o utilizați pentru a defini culoarea dorită pentru fundalurile HTML arată astfel:

<body style="background-color: value;">
html

În exemplul următor, folosim un cod hexagonal de culoare pentru a specifica albastru deschis ca culoare de fundal:

<html lang="en">
<head>
<title>background-example</title>
</head>
<body>
<div style="background-color: #BFEFFF;">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

Așa arată:

Imagine: HMTL background: Colour example
Sample HTML background with the hex code ‘#BFEFFF’.

Dacă este necesar, puteți defini culori pentru fundalurile HTML separat pentru secțiuni individuale ale paginilor dvs. web. Acest lucru se realizează utilizând atributul style și proprietatea background-color. Puteți vedea cum funcționează acest lucru în exemplul următor, în care au fost setate culori diferite pentru fundalul general, precum și pentru fundalurile <h2> titlurilor și <p> secțiunilor de text:

<html lang="en">
<head>
<title>background-example</title>
<style>
body {background-color: #BFEFFF;}
h2 {background-color: #1E90FF;}
p {background-color: #00CED1;}
</style>
</head>
<body>
<h2>The background of this headline is set to DodgerBlue.</h2>
<p>This background is set to DarkTurquoise.</p>
</body>
</html>
html
Imagine: Example: Three different coloured HTML backgrounds
Example of an HTML background with three different colours.

Setarea imaginilor ca fundaluri HTML

Pentru a putea utiliza imagini sau grafice ca fundaluri HTML, acestea trebuie salvate în formatele de imagine JPG, PNG, SVG, WebP sau GIF. Următorul exemplu arată codul adecvat pentru integrarea unei imagini ca fundal. Calea către imagine trebuie ajustată individual:

<html lang="en">
<head>
<title>background-example</title>
<style>
	body { background-image: url('/user/folder/assets/background/img/image.svg');	background-size: cover;}
</style>
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.8);">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

Când utilizați o imagine, trebuie să aveți întotdeauna în vedere lizibilitatea conținutului. Prin specificarea unor parametri suplimentari, puteți ajusta poziționarea imaginii sau a graficului pentru a vă asigura că textul se distinge de fundal.

Mergi la meniul principal