Imagine de fundal in functie de rezolutia calculatorului

Scris de **Mihai** Mier Oct 14, 2020 6:05 pm

Imagine de fundal in functie de rezolutia calculatorului

Bun gasit! Foarte fericit

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 validare

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.