Bun gasit!
In
acest tutorial va vom arata cum puteti face astfel incat tuturor
membrilor, indiferent de rezolutia monitorului calculatorului pe care il
detin, sa li se afiseze forumul in acelasi fel. Tutorialul functioneaza
pentru toate versiunile.
! Veti avea nevoie de un set de imagini de fundal avind urmatoarele dimensiuni:
- 800x600 px
- 1024x768 px
- 1280x960 px
- 1600x1200px
- dimenisuni mai mari decat 1600 px
1. Implementarea JavaScript:Vizitam:
Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript |
Facem click pe butonul
Creati un nou cod JavaScript.
Completam rubricile astfel:
- Titlu: Fundal in functie de rezolutie
- Amplasare: Toate paginile
- Cod JavaScript: Adaugati codul de mai jos...
$(function(){
var bg= "Adresa URL a imaginii mai mare decat 1600 de pixeli dimensiune";
if(screen.width < 801) bg="Adresa URL a imaginii de 800 de pixeli";
else if(screen.width < 1025) bg="Adresa URL a imaginii de 1024 de pixeli";
else if(screen.width < 1281) bg="Adresa URL a imaginii de 1280 de pixeli";
else if(screen.width < 1601) bg="Adresa URL a imaginii de 1600 de pixeli";
document.body.style.backgroundImage="url(""+bg+"")";
});
Tot ce trebuie sa facem acum este sa inlocuim fragmentele rosii cu linkurile directe ale imaginilor din set.
Apoi facem click pe butonul
2. Implementarea CSS:Vizitam:
Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS |
Adaugam urmatorul cod:
Cod:body{
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}Acest cod va centra fundalul forumului si va fixa pagina (pentru ca fundalul sa nu defileze la derularea in sus/jos a paginii).
Apoi facem click pe butonul
Valideaza.