CSS3 contine trei noi proprietati pentru background: background-size, background-origin
si background-clip
, in plus, se pot adauga mai multe imagini pt. background la un element HTML si se pot crea culori gradient cu: linear-gradient
.
background-size
Proprietatea CSS
background-size: width height;
permite definirea lungimii si inaltimii (width height) de afisare a imaginii pt. background.
- Valori:
- auto - (default) Seteaza dimensiunea laturii astfel incat sa se mentina raportul de aspect al imaginii. Daca ambele valori sunt "auto", imaginea apare la dimensiunile ei.
- percentage - Seteaza dimensiunile de background a imaginii in procente raportate la elementul parinte (nu la imagine). Prima valoare pt lungime (width), a doua pt. inaltime (height).
Daca se adauga o singura valoare, a doua e considerata "auto".
- pixels - Seteaza lungimea si inaltimea de afisare a imaginii pt. background la marimile specificate.
Daca se adauga o singura valoare, a doua e considerata "auto".
- cover - Imaginea de background e dimensionata astfel incat sa umple complet zona de fundal.
- contain - Dimensioneaza imaginea la marimea ce mai mare astfel incat sa fie continuta in suprafata de fundal.
- Exemplu:
<style>
#id1 {
width:200px;
height:100px;
border:1px solid blue;
background:url('css/css3.jpg');
background-size:100px 60px;
background-repeat:no-repeat;
margin:5px auto;
}
#id2 {
width:300px;
height:120px;
border:1px solid #01da02;
background:url('css/css3.jpg');
background-size:contain;
background-repeat:no-repeat;
margin:5px auto;
}
#id3 {
width:300px;
height:120px;
border:1px solid silver;
background:url('css/css3.jpg');
background-size:cover;
margin:5px auto;
}
</style>
<div id="id1">Free CSS Course - size in pixels</div>
<div id="id2">coursesweb.net - size contain</div>
<div id="id3">marplo.net - size cover</div>
Rezultat:

Free CSS Course - size in pixels

coursesweb.net - size contain
marplo.net - size cover
Culori Gradient
Pentru adaugare culoare gradient la fundal, se foloseste proprietatea
background: linear-gradient();
cu aceasta sintaxa:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
- "direction" reprezinta directia de afisarie a culorilor: "to right", "to bottom right", "top left", "top bottom" (default). Daca nu e specificata, se considera "top bottom".
- "color-stop" sunt culorile de referinta pt. gradient.
Exemplu:
<style>
#id1 {
background: linear-gradient(to bottom right, #11ee22, #fefe88, #1122fb);
height:120px;
width:300px;
}
</style>
<div id="id1">Free CSS Course<br />
coursesweb.net</div>
Rezultat:
Free CSS Course
coursesweb.net
Se poate defini si distanta de referinta a culorilor din gradient, adaugand un procent dupa valoarea culorii.
- Exemplu:
<style>
#id1 {
background: linear-gradient(to bottom right, #11ee22 0%, #fefe88 40%, #1122fb 75%);
height:120px;
width:300px;
}
</style>
<div id="id1">Free CSS Course<br />
coursesweb.net</div>
background-origin
Proprietatea CSS
background-origin
specifica zona de pozitionare a imaginii de fundal.
Preia una din aceste valori:
- padding-box - pozitionarea e relativa la coltul din stanga-sus a marginii de padding.
- border-box - pozitionarea e relativa la coltul din stanga-sus a bordurii.
- content-box - background-ul incepe din coltul stanga-sus a continutului.
- Exemplu:
<style>
#id1 {
width:350px;
height:120px;
padding:20px;
border:3px solid blue;
background:url('css/css3.jpg');
background-repeat:no-repeat;
background-color:#bcfede;
background-origin:content-box;
}
#id2 {
width:350px;
height:120px;
padding:20px;
border:3px solid blue;
background:url('css/css3.jpg');
background-repeat:no-repeat;
background-color:#bcfede;
background-origin:border-box;
margin-top:5px;
}
</style>
<div id="id1">Position the background image within the content-box</div>
<div id="id2">Position the background image relative to the border</div>
Rezultat:
Position the background image within the content-box
Position the background image relative to the border
background-clip
Proprietatea
background-clip
se foloseste pentru a determina suprafata de afisare a culorii pentru fundal ( background-color ).
Preia una din aceste valori:
- border-box - culoare de fundal se extinde pana la bordura.
- padding-box - culoarea de fundal se extinde la padding.
- content-box - culoarea de fundal apare doar in suprafata ocupata de continut.
Exemplu:
<style>
#id1 {
width:350px;
height:120px;
padding:20px;
border:2px solid blue;
background-color:#cdfeda;
background-clip:padding-box;
}
#id2 {
width:350px;
height:120px;
padding:20px;
border:2px solid blue;
background-color:#cdfeda;
background-clip:content-box;
}
</style>
<div id="id1">background-clip with padding-box</div>
<div id="id2">background-clip with content-box</div>
Rezultat:
background-clip with padding-box
background-clip with content-box
Imagini Multiple la Background
Ca sa aplicati mai multe imagini la fundalul unui element HTML, se adauga la proprietatea css
background-image
functii
url() (separate prin virgula) cu adresele imaginilor.
- Celelalte proprietati legate de "background-image" (background-position, background-repeat) folosesc valori separate prin virgula, in functie de modul dorit de afisare a imaginilor adaugate. Sau o singura valoare care se aplica la toate.
- Exemplu:
<style>
#id1 {
width:400px;
height:150px;
background-image: url('css/html_course.jpg'), url('css/css3.jpg');
background-repeat: no-repeat, repeat-x;
background-position: center top, center bottom;
}
</style>
<div id="id1">Multiple background images</div>
Rezultat:
Multiple background images
Un Test simplu in fiecare zi
HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut face ca valoarea din caseta de text sa nu poata fi modificata de utilizator?
checked="checked" readonly="readonly" disabled="disabled"<input type="text" value="valoare-fixa" readonly="readonly" name="a_name" />
Ce proprietate CSS permite crearea de colturi rotunjite?
background-size border-size border-radius.class {
border:2px solid blue;
border-radius:1.2em;
}
Ce instructiune afiseaza o fereastra cu mesaj si butoane OK si Cancel?
indexOf() confirm() prompt()var ques = window.confirm("Rezultatul lui 0+0 este 0?");
if (ques) alert("Corect");
else alert("Incorect");
Indicati functia PHP care returneaza numarul cel mai mic dintr-o multime de numere.
floor() ceil() min()$min_nr = min(12, 8, 25, 13);
echo $min_nr; // 8
Alegeti verbul corect care trebuie in propozitia: "Its ears ... big".
are is hasIts ears are big.
- Urechile lui sunt mari.
Alegeti verbul corect care trebuie in propozitia: "Los niños ... deportistas"
soy son estáLos niños son deportistas.
- Copii sunt sportivi.