Forum gratuit: forum de suport al utilizatorilor Forumgratuit
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

Imagine de fundal in functie de rezolutia calculatorului

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Imagine de fundal in functie de rezolutia calculatorului

Mesaj 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.



Imagine de fundal in functie de rezolutia calculatorului Untit104
Imagine de fundal in functie de rezolutia calculatorului KmYIBDv
Imagine de fundal in functie de rezolutia calculatorului Scre1015 Imagine de fundal in functie de rezolutia calculatorului 398 Imagine de fundal in functie de rezolutia calculatorului 2209 Imagine de fundal in functie de rezolutia calculatorului Scre1016 Imagine de fundal in functie de rezolutia calculatorului Portoq16
Mesaje: 22907 ● Utilizatori: 18220 ● Ultimul membru: » Midori «
Mihai

Mihai
Administrator
Administrator

Mesaje : 1478
Varsta : 24
Localizare : București, România
Data înscrierii : 25/09/2014
Mulțumiri : 101
Google Chrome phpBB3

http://fgsuport.forumgratuit.ro
Mihai a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum