Acest ghid vă va arăta cum să schimbaţi complet înfăţișarea site-ului dvs. web, prin adăugarea unei imagini de fundal. Luaţi în considerare că anumite șabloane oferite sunt mai potrivite pentru adăugarea unei imagini de fundal decât altele. În acest exemplu vă vom arăta cum se poate adăuga o imagine de fundal folosind șablonul 157j.

Pentru început, alegeţi o imagine de fundal ale cărei dimensiuni sunt cel puţin 1920px x 1080px, pentru a acoperi mărimea standard a unui monitor Full HD. Din moment ce aceste imagini pot fi destul de mari, este bine să experimentaţi cu formatul. Designurile geometrice salvate drept fișiere .png ocupă mai puţin spaţiu, chiar și în format Full HD. Este recomandat ca dimensiunea datelor să nu depășească 500kB. Chiar și imaginile de această mărime se pot încărca greu pentru utilizatorii cu o conexiune înceată la internet.

Pasul următor constă în schimbarea șablonului. Mergeţi la tab-ul Design și selectaţi șablonul dorit (în cazul nostru, aceasta este șablonul 157j).

Faceţi clic pe Utilizaţi designul.

Site-ul dvs. va arăta în felul următor:

Mergeţi la Editorul CSS și încărcaţi imaginea pe care aţi dori s-o folosiţi ca și fundal. Puteţi face acest lucru plasând cursorul mouse-ului peste iconiţa verde din colţul dreapta sus al editorului CSS și selectând Încarcă imagine nouă pe server.

Odată ce imaginea a fost încărcată, copiaţi și lipiţi întregul URL în codul CSS (mai multe detalii mai jos).

La folosirea acestui șablon vom insera imaginea URLui în secţiunea body în locul codului din dreptul background-image. Nu schimbaţi nimic din valoarea background-image din paranteze și ghilimele. Salvaţi schimbările.

Mergeţi la pagina web și vedeţi cum arată.

Dacă textul negru este greu de citit pe noul fundal, schimbaţi-l în alb. Puteţi face acest lucru în editorul CSS. Sub secţiunea body, schimbaţi valoarea culorii color la rgb(255,255,255) și salvaţi.

Mergeţi din nou la pagina web și vedeţi cum arată.

Dacă nu vreţi ca imaginea de fundal să se repete pe monitoarele de dimensiune mai mari, adăugaţi background-repeat: no-repeat și asiguraţi-vă că valoarea background-position este center. S-ar putea, de asemenea, să doriţi să modificaţi culoarea background-color, astfel încât să se potrivească cu imaginea dvs. (Nu veţi putea folosi culoarea de fundal pe toate ecranele). Folosiţi un selector de culoare pentru a alege o culoare potrivită și a obţine codul său RGB.

În cazul unor șabloane, setarea predefinită pentru background-attachment este scroll. Cu alte cuvinte, atunci când derulaţi pagina în jos, imaginea se va mișca în sus și nu va mai acoperi întreg ecranul. Dacă doriţi ca imaginea să rămână fixată în aceeași poziţie, indifferent de unde vă aflaţi pe pagină, adăugaţi la codul CSS background-attachment: fixed;.

Iar acum vă puteţi bucura de noua înfăţișare a site-ului dvs! Iar noi suntem întodeauna curioși să vedem cum arată, așadar nu vă sfiiţi să împărtășiţi si cu noi schimbările!