Culoarea de fundal este un element destul de important al oricărei pagini web. În primul rând, stabilește starea de spirit dorită și starea generală de spirit a site-ului, iar în al doilea rând, facilitează percepția textului.

Culoarea de fundal a unei pagini web este setată folosind atributul bgcolor al etichetei .

Exemplul 1: Schimbarea culorii de fundal

Culoarea poate fi specificată în valoare hexazecimală sau după numele lui.

În ciuda faptului că puteți specifica orice culoare pentru fundal, majoritatea site-urilor folosesc fundal albși litere negre, ca variantă cea mai consacrată.

Imagine de fundal

Puteți utiliza orice imagine potrivită ca fundal. .

Fundalul nu trebuie să distragă atenția de la text, dar ar trebui să se îmbine bine cu schema de culori a paginii web și să aibă dimensiuni mici, astfel încât să se încarce rapid. Dacă, după toate cele de mai sus, doriți în continuare să adăugați o imagine de fundal în pagină, ar trebui să utilizați atributul de fundal al etichetei

Exemplul 2: Adăugarea

imagine de fundal Dacă imaginea este mai mică decât dimensiunea ecranului monitorului, aceasta va fi extinsă pe orizontală și pe verticală. Pentru că tapetul se încarcă mai lent decât

culoarea de fundal

, se poate dovedi că textul nu va mai putea fi citit pentru o perioadă de timp până când imaginile sunt încărcate. Același lucru se poate întâmpla dacă imaginile sunt dezactivate în browser. Prin urmare, se recomandă să setați întotdeauna culoarea de fundal împreună cu imaginea de fundal (exemplul 3).

Exemplul 3: Utilizarea unei imagini de fundal și a unei culori de fundal Fundal fixÎn mod implicit, când utilizați bara de defilare, imaginea de fundal se mișcă odată cu conținutul paginii web. .

Internet Explorer

Exemplul 4: Setarea unui fundal fix

Fundal

Prin specificarea atributului bgproperties, așa cum se arată în Exemplul 4, imaginea de fundal de pe pagina web va rămâne staționară, dar textul, grafica și alte elemente se vor muta cu bara de defilare. La configurarea oricărui site web, pe lângă funcționalitate, designul este foarte important. Acesta este ceea ce stabilește propriul stil și design al unei anumite companii sau persoane pentru care este creat site-ul web. Personalizarea culorii de fundal și a imaginii este ușoară, urmând instrucțiunile din acest articol. folosind notepad sau orice alt editor de text cu care sunteți obișnuit.

De exemplu, să luăm o pagină web primitivă cu un minim de text. Puteți deschide fișierul folosind orice browser.
Mai întâi, schimbați culoarea fundalului dvs., deoarece persoanele cu o conexiune lentă la Internet nu vor putea vedea imediat imaginea de fundal a site-ului. Pentru o vreme, în timp ce imaginea se încarcă, aceștia vor putea vedea doar culoarea site-ului dvs. Introduceți în etichetă parametrul bgcolor=”*****”, unde ***** este codul de culoare. Puteți afla culorile pentru HTML în orice editor grafic

selectând opțiunea „pentru web” sau pe site-ul web https://colorscheme.ru/color-names

Trebuie doar să selectați o culoare în paleta cercului și să îi atribuiți intensitatea în pătrat. În dreapta veți vedea două coduri pentru html. Copiați-le și lipiți-le în notepad.

După ce ați selectat o culoare și a introdus-o în cod, vedeți dacă ați făcut totul corect, vizualizând pagina web rezultată dintr-un browser.

Acum puteți începe să inserați imaginea de fundal. Plasați imaginea dorită în folderul de coduri pentru o mai mare comoditate. Da-i un nume cu litere latine. Acum aflați locația fișierului făcând clic pe el clic dreapta

mouse-ul selectând linia „Deschide cu” și făcând clic pe orice browser instalat pe computer. Copiați adresa de lașir de căutare

browser-ul dvs. Acum în etichetă

• introduceți linia:

style="background-image: url(‘file:///C:/Users/FILE_PATH.jpg’)”

Salvați fișierul.

Verificați-vă pagina web. Veți vedea că fundalul a fost înlocuit cu textul dvs.

• Vă rugăm să rețineți că pentru utilizatorii cu o rezoluție mai mare a ecranului, imaginea dvs. va fi duplicată în jos și în dreapta. Nu va arăta bine dacă imaginea nu este monocromatică. Există comenzi speciale pentru a corecta acest parametru. background-repeat: „Valoare”. Opțiunile pentru valoarea dvs. ar putea fi: „repeat-x” – repetă imaginea de fundal atât pe orizontală, cât și pe verticală. „repeat-y” – repetare numai pe verticală. „no-repeat” – imaginea este înghețată pe loc și nu se repetă. „spațiu” – întreaga pagină va fi umplută număr maxim
• copii ale imaginii, cele mai exterioare vor fi decupate. „rotund” – aceeași opțiune, dar marginile imaginii vor fi scalate cu atenție;
• background-size: Value Value2. Aici valorile trebuie să ia o valoare în pixeli. De exemplu: 100px 200px. Pe lângă pixeli, sunt acceptate valori procentuale. Aceasta este o opțiune pentru a umple pagina cu o imagine. Pe lângă numere, puteți introduce doi parametri: „conține” – umple pagina cu o imagine pe partea lungă și „copertă” – umple pagina cu o imagine pe lățime.

Odată ce cunoașteți elementele de bază ale umplerii unei pagini cu fundal în HTML, sunteți gata să vă creați primul site web.

Pentru a crea un site web, o întrebare importantă este cum să faci un fundal în html. Această procedură implică utilizarea anumitor etichete - cuvinte de codși scrisori. Datorită lor, puteți pune un fundal diferit, îl puteți face monocromatic - îl umpleți sau puteți pune orice imagine în locul fundalului. Asemenea acțiuni vor fi foarte utile pentru toți designerii de layout și pentru cei care decid să-și „imbrace” site-ul pe cont propriu.

Realizarea fundalului

Înainte de a crea fundalul html pentru site-ul web, trebuie să îl deschideți editor de text cod html pagini. Trebuie să rețineți că etichetele de pe pagină sunt plasate vertical. Apoi, între etichete … , trebuie să puneți o etichetă- aceste etichete sunt necesare pentru a clarifica stilul elementelor unei anumite pagini web. În locul celor trei puncte trebuie să scrieți - body (background:) . Acesta este un parametru care vă permite să setați stiluri diferite pentru fundalul paginii. Puteți efectua operația de setare a culorii în două moduri. Primul:

Corp (background:#000000) – fundalul paginii ar trebui să fie acum negru.

Această metodă este, de asemenea, potrivită pentru setarea atât a unei culori, cât și a unei imagini ca fundal. După două puncte puteți pune fie un cod de culoare, fie un link către imagine. Sau puteți folosi o metodă care înseamnă doar setarea unei culori - o umplere specifică pentru pagină. După două puncte trebuie să scrieți așa-numitul parametru – culoare. Și după el, pune codul culorii în sine. Această metodă este bună dacă o utilizați ca șablon. Notează-l și salvează-l, iar când este necesar, stabilește o culoare și pune-o pe pagină.

Poti pune in schimb fundal simplu, poza. Dacă trebuie să aflați: în html, cum să faceți o imagine ca fundal, atunci operațiuni similare trebuie făcute. Scrieți etichete, puneți corpul (fond: link către imagine). Trebuie să ne amintim că imaginea în sine poate fi oriunde. Și pe un site web de pe Internet, dar cel mai bine este să creați un folder în rădăcina documentului. În folderul în care vor fi salvate toate informațiile despre pagina site-ului, trebuie să creați altul - pentru imagini. Operația va arăta astfel:

Acum poza pe care ați ales-o va fi fundalul întregii pagini a site-ului. Sperăm că înțelegeți cum să faceți un fundal în html. Doar încercați și totul va funcționa cu siguranță!

ÎN fundal html nu sunt specificate pentru site, aceasta este scrisă folosind stiluri CSS, dar aceasta este doar o formalitate teoretică. Acum să aflăm cum să determinăm acest fundal.

Fundal pentru un site web sau un bloc separat

Deoarece avem nevoie de un fișier css pentru a atinge acest obiectiv, trebuie să-l creăm și să-l conectăm la html. Despre asta este scris în. După aceasta puteți începe să lucrați. În primul rând, trebuie să decideți pentru ce doriți să setați fundalul. Dacă întreaga pagină în întregime, atunci o puteți face astfel:

Corp (culoare de fundal: alb; )

Adică accesăm eticheta body, care reprezintă întreaga noastră pagină. Pentru a seta culoarea de fundal, utilizați proprietatea background-color. Dar ce se întâmplă dacă trebuie să setați fundalul la un model mai degrabă decât o culoare solidă? Atunci ar trebui să scrii așa:

Corp (imagine de fundal: url (calea către imagine. extensie imagine))

Pentru claritate, vă propun să privim totul mai în detaliu folosind un exemplu. Pentru asta voi folosi această imagine:

De exemplu, imagine de fundal: url(comp.png) . În acest exemplu, setăm o imagine de fundal numită comp (așa am numit-o) format png, care se află în același folder cu fișierul css.
În html voi crea un bloc personalizat cu dimensiuni specifice pentru a demonstra funcționarea proprietăților CSS.

Și iată stilurile pentru el:

#ct( Imagine de fundal: url(comp.png); lățime: 600px; înălțime: 400px; )

Iată ce avem:

De ce este așa? Faptul este că, implicit, browserul repetă imaginea de atâtea ori pentru a umple complet blocul. Uneori, acest lucru este necesar, de exemplu, atunci când utilizați modele fără sudură, dar în cazul nostru ar trebui să existe o singură imagine. Din fericire, acest lucru poate fi gestionat foarte ușor.

Repetați fundalul

Dacă aveți o imagine ca fundal, atunci implicit se va repeta pe orizontală și pe verticală pentru a umple întreg spațiul paginii. Pentru a elimina acest lucru, utilizați proprietatea background-repeat și valoarea sa fără repetare. Există, de asemenea, următoarele valori:

• Repeat-x – repetă numai pe orizontală
• Repet-y – numai pe verticală

Să adăugăm proprietăților fundalului nostru grafic:

Repetare de fundal: fără repetare;

Poziţie

Proprietatea background-position determină locația în care va fi plasată imaginea. Două valori sunt specificate aici - orizontal și vertical. Exemple: fundal-poziție: dreapta jos – poziție în colțul din dreapta jos, sus-stanga – în colțul de jos sus (și așa în mod implicit), 250px 500px – offset din stânga colțul de sus la dreapta cu 250 de pixeli și în jos cu 500.

Să ne uităm mai bine la exemple:

Poziția de fundal: dreapta sus;

Imaginea se va muta în marginea din dreapta sus. Am dat blocului și un fundal galben pentru ca marginile acestuia să se vadă.

fundal-poziție: 50% 50%;

Imaginea a apărut exact centrată în blocul său. Da, da, acest lucru este posibil și datorită înregistrării procentuale a poziției.

fundal-poziție: 70% 20%;

Fundalul este deplasat cu 70% pe orizontală și cu 20% pe verticală.

De asemenea, este permisă specificarea unei valori negative a poziției în pixeli. Acest lucru se poate face, de exemplu, atunci când utilizați o imagine sprite mare și trebuie să puneți partea necesară a acestui sprite într-un bloc.

Blocați fundalul

De asemenea, îmi place foarte mult o proprietate numită background-attachment . Are doar două valori, iar prima este implicită (defilare). Aceasta înseamnă că, pe măsură ce derulați pagina, fundalul se va derula și, dacă utilizați o imagine fără repetare, aceasta se va epuiza în cele din urmă și va fi doar o culoare solidă.

Pentru a preveni acest lucru, este specificat atașamentul de fundal: fix, iar acum fundalul nostru este fixat în siguranță. Acest lucru poate fi comparat cu modul de definire a unei poziții fixe pentru un bloc, astfel încât acesta să nu dispară din pagină atunci când este derulat.

O versiune prescurtată a tuturor acestor bunătăți

Am discutat multe proprietăți care vă permit să creați un fundal, dar dacă le folosiți pe toate, ajungeți la o înregistrare greoaie. Există o soluție foarte elegantă. Proprietatea de fundal vă permite să scrieți un spațiu separat setările necesare in aceasta ordine:
Fundal: imaginea color repeta pozitia pinului;
Și acum totul poate fi scris așa:

Fundal: url galben(comp.png) fără repetare 20% 100px;

Dacă o proprietate nu trebuie definită, atunci este pur și simplu omisă (în cazul nostru, nu am scris atașament de fundal).

O mulțime de fundaluri

Ce se întâmplă dacă aveți nevoie de mai multe imagini de fundal? Se întâmplă, ce poți face? Astăzi, CSS acceptă această caracteristică. Hai să încercăm și noi. Să luăm această pictogramă

L-am numit laptop.

Și iată codul pentru a introduce multifonul:

Fundal: url(comp.png) fără repetare 20% 100px, url(laptop.png) fără repetare 50% 50%; culoare de fundal: galben;

După cum puteți vedea, trebuie doar să puneți o virgulă după prima imagine și să introduceți setările pentru a doua. În acest caz, este mai bine să setați o culoare solidă separat.

În același mod, puteți înregistra cât mai multe imagini doriți, dar nu exagerați - prea multe grafice nu sunt foarte bune.

Aici aș dori să închei acest articol. Puteți face multe alte lucruri interesante cu fundalul, voi încerca să scriu despre ele în viitor (și am scris deja ceva - de exemplu). Mult succes cu explorarea acestei proprietăți.

Browserele moderne vă permit să adăugați un număr arbitrar de imagini de fundal unui element, listând parametrii fiecărui fundal separați prin virgule. Este suficient să folosiți proprietatea universală de fundal și să specificați mai întâi un fundal pentru ea și al doilea separat prin virgulă.

Cum să întindeți fundalul pe toată lățimea ferestrei?

Pentru a scala fundalul, utilizați proprietatea background-size setați-i valoarea la 100%, apoi fundalul va ocupa întreaga lățime a ferestrei browserului. Pentru versiunile mai vechi de browsere, ar trebui să utilizați proprietăți specifice cu prefixe, așa cum se arată în exemplul 1.

Cum să adăugați o imagine de fundal la o pagină web?

Pentru a adăuga o imagine de fundal la o pagină web, setați calea către imagine în valoarea URL a proprietății de stil de fundal, care la rândul său este adăugată la selectorul de corp.

Este posibil să faci un fundal animat?

Animația este o tehnică destul de puternică care poate aduce la viață orice document, așa că nu este surprinzător că a câștigat o popularitate enormă Tehnologia flash, care adaugă desene animate paginilor web, care sunt, de asemenea, interactive. Format grafic GIF suportă, de asemenea animație simplă prin schimbarea secvenţială a cadrelor. Deci, folosind o imagine în acest format, este posibil să animați nu numai poze individuale, dar și fundalul unei pagini web sau al unui element anume.

Mai întâi trebuie să creați o imagine animată format GIF la ce il poti folosi? programul Adobe Photoshop sau altul potrivit pentru acest scop. Există, de asemenea, biblioteci de fișiere animate gata făcute care pot fi folosite ca imagine de fundal. Apoi, imaginea este adăugată ca fundal folosind proprietatea stilului de fundal, așa cum se arată în Exemplul 1.

Cum se pune o imagine de fundal în colțul din dreapta jos al paginii?

Pentru a controla poziția imaginii de fundal pe pagină, se folosește proprietatea de stil de poziție de fundal, aceasta setează simultan coordonatele orizontale și verticale ale imaginii. Pentru a anula repetarea unei imagini de fundal, utilizați proprietatea background-position cu valoarea no-repeat .

Cum să faci fundalul să nu se repete?

În mod implicit, imaginea de fundal se repetă orizontal și vertical, formând un mozaic pe întreg câmpul paginii web. Cu toate acestea, acest comportament de fundal nu este întotdeauna necesar, mai ales în cazul unei singure imagini, deci va veni ajutorul o valoare care nu se repetă adăugată proprietății stilului de fundal.

Cum pot face ca fundalul să se repete doar pe verticală?

Repetarea fundalului este de obicei necesară pentru a crea linii decorative sau degrade care sunt legate de înălțimea unui element sau a unei ferestre de pagină web. În astfel de cazuri, repetarea fundalului pe verticală oferă o imagine consistentă, indiferent de dimensiunea elementelor. Numai la început ar trebui să vă asigurați că imaginea de fundal se repetă fără cusături.