Cautare in site

Articol

Imagine de fundal pe tot ecranul

Imagine de fundal fullsize cu CSS

In acest tutorial vom vedea cel mai simplu mod in care putem seta o imagine de fundal site-ului nostru care sa ocupe tot ecranul. Imagine care se va adapta intotdeauna rezolutiei browser-ului pe care este vizualizat site-ul.

Pentru a pune in practica acest lucru vom gasi pe internet nenumarate script-uri Java care se pot dovedi destul de complicate de setat. Acestea pot da si probleme in procesul de construire a site-ului, pot intra in conflict cu alte elemente ale paginii web si pot prezenta probleme la vizualizarea in variile browsere web.

Cover cu CSS3

Modalitatea prezentata in acest tutorial este cea mai simpla pentru a obtine o imagine de fundal pe tot ecranul care se redimensioneaza in baza rezolutiei browserului. Asta pentru ca se bazeaza exclusiv pe o unica regula CSS, in mod deosebit pe specifica COVER din CSS3. La aceasta regula CSS nu trebuie sa mai adaugam nici un script Java, jQuery samd.

Exemplu

Codul este acesta de mai jos: trebuie doar sa modificati link-ul url pentru imaginea voastra de fundal. Dupa cum vedem aceasta specifica trebuie sa fie scrisa in interiorul regulei pentru tagul body deoarece setam imaginea de fundal pentru intreaga pagina. In cazul inserarii regulei CSS in foaia de stil generala, toate paginile vor avea aceeasi imagine de fundal.

body {   
background-attachment: fixed;
background-image: url(images/exemplu-imagine-fundal.jpg);
background-repeat: no-repeat;
background-position: center;
margin: 0px;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;
}

Compatibilitate in Browser

Specifica a fost scrisa pentru toate browserurile:  Webkit (Safari, Chrome si Safari pentru Ipad), Mozilla Firefox, Opera si bineinteles Internet Explorer.

Dupa ce am introdus acasta regula in foia noastra de stil redimensionand fereastra bowser-ului imaginea de fundal isi va modifica rezolutia in functie de cea a browserului. In acelasi timp isi mentine  proportiile originare.

Aceasta regula, fiind aceasta o specifica a versiunii 3 a Cascade Style Sheets, va fi viszibila numai in browserele compatibile cu ultima versiune a CSS.

In cazul in care site-ul nostru va fi deschis pe un browser foarte vechi care nu este compatibil cu CSS3 imaginea se va vedea ca si o simpla imagine de fundal. In cazul browserelor foarte vechi imaginea de fundal nu va putea fi redimensionata in baza dimensiunilor ferestrei bowser-ului.

Nu sunt comentarii

Adauga Comentariu

Adresa ta de e-mail nu va fi publicata.