Strona wykorzystuje pliki cookies, jeśli wyrażasz zgodę na używanie cookies, zostaną one zapisane w pamięci twojej przeglądarki. W przypadku nie wyrażenia zgody nie jesteśmy w stanie zagwarantować pełnej funkcjonalności strony!

Kilka warstw tła strony? To możliwe.

Napisał  grudzień 07

Dzięki CSS3 możemy w projekcie strony uwzględniać wiele obrazów tła dla całej strony, albo poszczególnych jej elementów. Żeby tego dokonać nie trzeba być adeptem czarnej magii informatycznej, wystarczy użyć prostej listy, rozdzielonej przecinkami.

Poniżej przedstawiam przykład: nasza maskotka – Wurfel, biegnący przez tulipany.

  

 

Tak wygląda kod css:
#wielotlo1 { 
width: 600px;
height: 402px;
background-image: url("/images/Blog/wurfel.png"), url(images/Blog/tulipany.jpg");
background-position: center bottom, left top;
background-repeat: no-repeat
}

 Konstrukcja jest bardzo prosta. Dzięki oddzielonej przecinkami liście własciwości, "background-image" tworzy kolejne warstwy tła. Kolejność jest "od oczu widza" - pierwsza wartość jest na wierzchu, kolejna pod nią i tak dalej. 

 Konstrukcja CSS umozliwia nam dwa zapisy tego samego.

1) Pełny:

#wielotlo1 {
width: 600px;
height: 402px;
background-image: url("/images/Blog/wurfel.png"), url(images/Blog/tulipany.jpg");
background-position: center bottom, left top;
background-repeat: no-repeat
}

2) Skrócony:

#wielotlo1 {
width: 600px;
height: 402px;
background-image: url("/images/Blog/wurfel.png") center bottom no-repeat, url(images/Blog/tulipany.jpg") left top no-repeat;

A jak sobie z tym radzą przeglądarki? Nieźle. Nowsze nie powodują problemów. Mozilla Firefox (3.6 wzwyż), Safari (od 1.0 wzwyż), Chrome (1.3 wzwyż), Opera (10.5 wzwyż) a nawet (fanfary) Internet Explorer (9.0 wzwyż) temat ogarniają i pozwalają użytkownikom cieszyć naszą, w pocie czoła zaprojektowaną, stroną.

Czytany 7146 razy
Kuba A.

napisane przez:

Specjalista e-commerce, social media, informatyk.

Trener IT, e-commerce i e-marketingu.

Prywatnie - ojciec dwójki cudownych dzieciaków i miłośnik wycieczek motocyklowych.

Chcesz z nami współpracować? Zapraszamy!

JoomShaper