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 Cassius Dio la data de Sam 6 Apr - 10:16

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.

Tutorial scris de Quierra, tradus de SGSS

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
Localizare : Strawberry Fields
Data înscrierii : 13/07/2012
Multumiri : 83
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum