Fundalul unei pagini web

Sunt multe lucruri ce putem face cu fundalul paginilor noastre. Culorile și imaginile pot fi aplicate întregului conținut sau unor părți din acesta, ajutând la evidențierea diferitelor elemente ale site-ului nostru, și joacă un rol important în aspectul general. Putem denumi culorile după numele lor dacă sunt o culoare de bază, cum ar fi roșu, alb, albastru etc. sau putem furniza valoarea hex sau valorile pentru valorile sale roșu, verde și albastru.

<style>
p.one {
border-style:solid;
border-width:5px;
Background-color: green;
}
p.two {
border-style:groove;
border-width:medium;
Background-color:#ff3355;
}
p.three {
border-style:dotted;
border-width:1px;
border-color:red;
background-color: rgb(33,66,99);
}
p {padding:50px 30px 50px 5px;}
p {margin:50px;}
</style>
<p class="one">Some text.</p>
<p class="two">Some more text.</p>
<p class="three">Even more text.</p>

Pentru a folosi imagini în loc de culori, putem specifica locația imaginii în fișierele noastre și, de asemenea, putem dicta unde vrem să o plasăm pe pagina noastră, dacă ar trebui sau nu să se repete și dacă ar trebui să se mute sau să rămână pe loc când utilizatorul derulează pagina. În mod implicit, imaginile se vor repeta pentru a umple spațiul în care sunt plasate. Pentru a preveni acest lucru, putem adăuga un atribut no-repeat definițiilor noastre. De data aceasta, vom folosi atributul background spre deosebire de atributul background-color. Avantajul acestui lucru este că le puteți include pe ambele într-un set de reguli pe același obiect (imaginea întâi, culoarea a doua), permițându-vă să aveți o imagine deasupra unei culori de fundal. Rețineți că, în aceste exemple, va trebui să vă selectați propriile imagini în locul celor utilizate mai jos.

<style>
p.one {
border-style:solid;
border-width:5px;
background:url(clouds.jpg);
}
p.two {
border-style:groove;
border-width:medium;
background:url(calendar.jpg)
no-repeat;
background-color:#ff3355;
}
p.three {
border-style:dotted;
border-width:1px;
border-color:red;
background:url(calendar.jpg);
}
p {padding:50px 30px 50px 5px;}
p {margin:50px;}
</style>
<p class="one">Some text.</p>
<p class="two">Some more text.</p>
<p class="three">Even more text.</p>

Există două modalități de a obține acest efect. Primul este prin utilizarea stilului avansat prin CSS folosind opțiunile WebKit acceptate de unele browsere și apoi adăugarea regulilor de stil pentru a crea efectul cât mai aproape posibil în alte browsere. Al doilea este prin crearea unei imagini cu gradient repetabil. Bazarea primei abordări pe WebKit oferă suport pentru produsele Apple și Google. Pentru browserele care nu folosesc WebKit, trebuie să adăugăm reguli suplimentare pentru a obține același efect. Acesta este un exemplu mai avansat, deoarece necesită cunoștințe despre nevoile fiecărui browser pentru a crea:

<style>
#ourBackground {
background-color: #1a82f7;
background:
url(ourFallBackImage.png);
background-repeat: repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear,
0% 0%, 0% 100%,
from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background:
-webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top,
#2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top,
#2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top,
#2F2727, #1a82f7);
}
</style>
<div id="ourBackground" width="300px" height="300px">
<br/>
Some <br/>
Text <br/>
Here <br/>
<br/>
</div>

Acest cod ar trebui să producă o imagine aproape identică în fiecare browser, în funcție de regulile pe care browserul le poate executa:

Primele trei rânduri ale acestui script de stil — culoarea de fundal:

background-color: #1a82f7;
background: url(ourFallBackImage.png);
background-repeat: repeat-x;

demonstrează cum creăm efectul de gradient printr-o imagine. În acest exemplu, ourFallBackImage.png ar fi o imagine foarte slabă (1 pixel) lată și la fel de înaltă pe cât vrem să fie gradientul nostru. Repetând această imagine pe axa X (deplasându-se pe orizontală), imaginea va umple lățimea obiectului părinte. Specificând culoarea de jos a pixelilor din imaginea noastră ca fundal, gradientul va apărea pentru a umple pagina. Echilibrul regulilor noastre din acest exemplu obține același rezultat prin CSS, dar oferă și mai mult control asupra gradientului fără a fi nevoie să creați imagini suplimentare.

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu