Tutorial CSS - Background

Tutoriale CSS si HTML, tutoriale editare si instalare site-uri in CSS si HTML!
Avatar utilizator
DarkArms
Membru
Mesaje: 3107
Localitate: Reșița, România
Nick server: cleks
Contact:

Tutorial CSS - Background

Mesaj de DarkArms » Sâm Apr 16, 2016 12:03 pm

Pentru a formata background-ul elementelor HTML cu ajutorul CSS vom folosi urmatoarele atribute

background-color
background-image
background-repeat
background-attachment
background-position

Background solid

Cod: Selectaţi tot

body { background-color: #efefef; }
h1 { background-color:red, }
p { background-color:rgb(255,0,0); }
div { background-color: black; }
Dupa cum se observa culoarea background-ului poate fi exprimata in sistemul hexadecimal, RGB sau folosind numele in engleza.
Background imagine

Ca si valoare standard browserul va repeta imaginea pe latimea si lungimea pagini pentru a crea un background-ul

Cod: Selectaţi tot

body { 
	background-image: url("o_imagine.gif"); 
}
Pentru a repeta imaginea doar pe verticala sau doar pe orizontala vom folosi urmatorulcod CSS:

Cod: Selectaţi tot

body {
	background-image:url("o_imagine.gif");
	background-repeat:repeat-x;
}
Aceasta functie speciala a CSS-ului se poate folosi la crearea background-urilor cuefect gradient. Pentru a repeta inaginea pe verticala in loc de "repeat-x" vom folosi "repeat-y".

Daca nu vrei ca imaginea sa se repete trebuie sa specifici acest lucru

Cod: Selectaţi tot

body {
	background-image:url("o_imagine.gif");
	background-repeat:no-repeat;
}
Odata ce am specificat ca nu vrem ca imaginea sa se repede si in cazul in care nu specificam altceva browserul va adauga: background-position:top left; ca valoare standard.
CSS - background-attachment

CSS background-attachment se foloseste pentru a pune ca background o imagine care se misca impreuna cu continutul sau pur si simplu este fixa. Sintaxa CSS ar fi urmatoarea:

Cod: Selectaţi tot

body {
	background-image:url("o_imagine.png");
	background-repeat:no-repeat;
	background-attachment:fixed;
}
Scurtarea codului CSS

Cod: Selectaţi tot

body {
	background-color:#ffffff;
	background-image:url("o_imagine.gif");
	background-repeat:no-repeat;
	background-position:top right;
}
Tot ce am scris mai sus se poate rezuma la expresia CSS de mai jos

Cod: Selectaţi tot

body {
	background-color: #ffffff url("o_imagine.gif") no-repeat top right;
}
Cand se foloseste varianta scurta a acestor atribute ordinea lor va fi mereu urmatoarea:

background-color
background-image
background-repeat
background-attachment
background-position

Nu conteaza daca unul sau mai multe valori lipsesc atata timp cat se pastreaza aceasta ordine.

Înapoi la “Tutoriale CSS si HTML”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 2 vizitatori