Imagine de fundal html. Un fundal care se întinde întotdeauna pe pagină

De la autor: Le urez bun venit tuturor. Culorile de fundal și imaginile joacă un rol imens în designul web, deoarece permit proiectarea oricărui element mai atractiv. Astăzi ne vom uita la modul de realizare a unui fundal în html.

Este posibil să treceți cu html atunci când setați fundalul?

Trebuie să spun imediat că nu. În general, html nu este conceput pentru a stiliza paginile web. Este doar foarte incomod. De exemplu, există un atribut bgcolor cu care puteți seta culoarea de fundal, dar acest lucru este foarte incomod.

În consecință, vom folosi foi de stil în cascadă (css). Există mult mai multe oportunități pentru stabilirea fundalului. Astăzi le vom analiza pe cele mai de bază.

Cum pot seta fundalul prin css?

Deci, mai întâi de toate, trebuie să decideți ce element trebuie să setați fundalul. Adică, trebuie să găsim selectorul în care vom scrie regula. De exemplu, dacă fundalul trebuie setat pentru întreaga pagină ca întreg, atunci puteți face acest lucru prin selectorul de corp, pentru toate blocurile - prin selectorul div. Ei bine, etc. Fundalul poate și trebuie să fie legat de orice alte selectoare: clase de stil, identificatori etc.

După ce ați decis selectorul, trebuie să scrieți numele proprietății în sine. Pentru a seta culoarea de fundal (doar o culoare solidă, nu un gradient sau o imagine), utilizați proprietatea de culoare de fundal. După el, trebuie să puneți două puncte și să scrieți culoarea în sine. Acest lucru se poate face în diferite moduri. De exemplu, folosind cuvinte cheie, cod hex, formate rgb, rgba, hsl. Orice metodă va funcționa.

Cea mai frecvent utilizată metodă este codul hexazecimal. Pentru potrivirea culorilor, puteți utiliza un program în care codul de culoare este vizibil. De exemplu photoshop, vopsea sau un instrument online. În consecință, de exemplu, voi scrie un fundal general pentru întreaga pagină web.

corp (fundal-culoare: # D4E6B3;)

Acest cod trebuie inserat în secțiunea cap. Este important ca fișierele să se afle în același folder.

Imagine ca fundal

Voi folosi o pictogramă de limbă html mică ca imagine:

Să creăm un bloc gol cu ​​un identificator:

< div id = "bg" > < / div >

Să îi oferim o dimensiune și un fundal explicit:

#bg (lățime: 400px; înălțime: 250px; imagine de fundal: url (html.png);)

#bg ( lățime: 400px; înălțime: 250px; fundal - imagine: url (html. png);

Din acest cod, puteți vedea că am folosit o nouă proprietate - background-image. Este destinat doar inserării unei imagini ca fundal pentru un element html. Să vedem ce s-a întâmplat:

Pentru a seta o imagine, trebuie să scrieți după două puncte cuvânt cheie URL și apoi între paranteze specificați calea către fișier. În acest caz, calea este specificată pe baza faptului că imaginea se află în același folder cu documentul html. De asemenea, trebuie să specificați formatul imaginii.

Dacă ați făcut acest lucru și fundalul încă nu apare în bloc, verificați din nou dacă ați scris corect numele imaginii, dacă calea și extensia au fost specificate corect. Acestea sunt cele mai frecvente motive pentru care fundalul pur și simplu nu este afișat, deoarece browserul nu poate găsi imaginea.

Dar ai observat o particularitate? Browserul a luat și a reprodus imaginea în întregul bloc. Deci, pentru a ști, acesta este comportamentul implicit al imaginilor de fundal - acestea se repetă pe verticală și orizontală până când se pot încadra în bloc. Puteți controla cu ușurință acest comportament. Pentru a face acest lucru, utilizați proprietatea background-repeat, care are 4 valori principale:

Repetare - valoare implicită, imaginea se repetă pe ambele părți;

Repeat-x - se repetă numai pentru ois x;

Repeat-y - se repetă numai de-a lungul axei y;

No-repeat - nu repetă deloc;

Puteți scrie fiecare valoare și puteți vedea ce se întâmplă. Îl voi scrie așa:

background-repeat: repeat-x;

fundal - repetați: repetați - x;

Acum repetați doar pe orizontală. Dacă nu se repetă, ar exista o singură imagine.

Excelent, puteți finaliza deja acest lucru, deoarece acestea sunt posibilități de bază pentru lucrul cu fundalul, dar vă voi arăta încă 2 proprietăți care vă permit să obțineți mai mult control asupra acestuia.

Cu repetarea, proiectanții de layout obișnuiau să obțină texturi de fundal și gradiente folosind o singură imagine minusculă. Ar putea fi de 30 de pixeli cu 10 pixeli sau mai puțin. Poate ceva mai mult. Imaginea a fost de așa natură încât atunci când a fost repetată pe una sau chiar pe ambele părți, nu au fost vizibile tranziții, astfel încât, ca rezultat, a fost obținut un singur fundal solid. Apropo, această abordare merită folosită acum dacă doriți să utilizați o textură perfectă pe site-ul dvs. ca fundal. Astăzi, gradientul poate fi deja implementat folosind metode CSS3, cu siguranță vom vorbi despre acest lucru.

Poziția de fundal

Implicit, imaginea de fundal, dacă nu este setată să se repete, va fi în colțul din stânga sus al blocului său. Dar poziția poate fi ușor modificată folosind proprietatea de poziție de fundal.

Puteți să o întrebați în diferite moduri. Una dintre opțiuni este pur și simplu să indicați laturile în care ar trebui să fie amplasată imaginea:

fundal-poziție: dreapta sus;

fundal - poziție: dreapta sus;

Adică, pe verticală, totul rămâne același: imaginea de fundal este situată deasupra, dar orizontal, am schimbat partea în dreapta, adică dreapta. O altă modalitate de a seta poziția este procentual. În acest caz, numărătoarea inversă începe în orice caz din colțul din stânga sus. 100% - întregul bloc. Astfel, pentru a plasa imaginea exact în centru, scriem astfel:

poziția de fundal: 50% 50%;

fundal - poziție: 50% 50%;

Amintiți-vă un lucru important legat de poziționare - primul parametru este întotdeauna poziția orizontală, iar al doilea este poziția verticală. Deci, dacă vedeți o valoare de 80% 20%, puteți concluziona imediat că imaginea de fundal va fi puternic deplasată spre dreapta, dar nu va coborî mult.

Și, în cele din urmă, puteți scrie poziția în pixeli. Totul este la fel, doar px va fi folosit în loc de%. În unele cazuri, această poziționare poate fi, de asemenea, necesară.

Notare prescurtată

Sunt de acord că codul se dovedește a fi destul de greoi dacă totul este stabilit așa cum am făcut-o. Se pare că calea către imagine trebuie setată, iar repetarea și poziția. Desigur, repetarea și poziția nu sunt întotdeauna necesare, dar în orice caz, este mai corect să folosiți notația proprietății stenogramă. Arată așa:

fundal: # 333 url (bg.jpg) fără repetare 50% 50%;

fundal: # 333 url (bg.jpg) fără repetare 50% 50%;

Adică, primul pas este să înregistrați culoarea solidă generală de fundal, dacă este necesar. Apoi calea către imagine, repetare și poziție. Dacă un anumit parametru nu este necesar, atunci îl omitem. De acord, acest lucru este mult mai rapid și mai convenabil și, de asemenea, ne reducem semnificativ codul. În general, vă sfătuiesc să scrieți întotdeauna în abrevieri, chiar dacă trebuie doar să indicați o culoare sau o imagine.

Controlarea dimensiunii imaginii de fundal

Imaginea noastră actuală nu este potrivită pentru următorul truc, așa că voi lua o alta. În dimensiune, să fie ca un bloc sau mai mare decât acesta. Deci, imaginați-vă că vă confruntați cu o sarcină: să creați o imagine de fundal, astfel încât să nu-și umple complet blocul. Și imaginea, de exemplu, este chiar mai mare decât dimensiunea blocului.

Ce poți face în acest caz? Desigur, cea mai simplă și rezonabilă opțiune ar fi simpla reducere a imaginii, dar nu este întotdeauna posibil să se facă acest lucru. Să presupunem că este pe server și în acest moment nu există timp sau oportunitate de a-l reduce. Problema poate fi rezolvată folosind proprietatea de dimensiune a fundalului, care poate fi numită relativ nouă și care vă permite să manipulați dimensiunea imaginii de fundal și, într-adevăr, orice fundal.

Deci, imaginea mea ocupă acum tot spațiul din bloc, dar îi voi oferi o dimensiune de fundal:

dimensiunea fundalului: 80% 50%;

fundal - dimensiune: 80% 50%;

Din nou, primul parametru este dimensiunea orizontală, al doilea - dimensiunea verticală. Putem vedea că totul a fost aplicat corect - fotografia a devenit 80% din lățimea blocului în lățime și jumătate în înălțime. Aici trebuie doar să faceți o clarificare - setând dimensiunea ca procent, puteți afecta proporțiile imaginii. Așadar, aveți grijă să nu ieșiți din proporție.

După cum ați putea ghici, dimensiunea fundalului poate fi specificată și în pixeli. Există, de asemenea, două cuvinte cheie cu sens care pot fi folosite și:

Coperta - imaginea va fi scalată în așa fel încât cel puțin o parte a acesteia să umple complet blocul.

Conține - scalează-o astfel încât imaginea să se potrivească complet în bloc la dimensiunea sa maximă.

Avantajul acestor valori este că nu modifică raportul de aspect al imaginii, lăsându-le la fel.

De asemenea, trebuie să înțelegeți că întinderea imaginii poate duce la o deteriorare a calității acesteia. Pot da un exemplu din viața și practica reală a proiectanților. Toată lumea știe și înțelege că atunci când codificați desktop-uri, trebuie să adaptați site-ul la lățimile principale ale monitoarelor: 1280, 1366, 1920. Dacă faceți o imagine de fundal cu o dimensiune de, să zicem, 1280 x 200 și nu o setați are dimensiunea fundalului, apoi ecranele cu lățimea sunt mai mari, va apărea un spațiu gol, imaginea nu va umple lățimea complet.

În 99% din cazuri, acest lucru nu se potrivește dezvoltatorului web, așa că el setează dimensiunea fundalului: acoperire astfel încât imaginea să se întindă întotdeauna la lățimea maximă a ferestrei. Acesta este un truc bun de utilizat, dar acum vă confruntați cu faptul că utilizatorii cu o lățime a ecranului de 1920 pixeli pot vedea o imagine de calitate suboptimală.

Permiteți-mi să vă reamintesc că se va întinde la lățimea maximă. În consecință, calitatea se va deteriora automat. Singura soluție corectă aici ar fi utilizarea inițială a unei imagini mai mari - 1920 pixeli lățime. Apoi, pe cele mai largi ecrane, va avea dimensiunea sa naturală, iar pe altele va fi pur și simplu tăiat încet, dar în același timp, cu selecția corectă a imaginii de fundal, pe aspect site-ul nu va fi afectat.

În general, acesta este doar un exemplu de utilizare a cunoștințelor pe care le-ați câștigat în acest articol atunci când realizați machete reale.

Fundal semitransparent cu css

Un alt truc care poate fi implementat folosind css este un fundal semi-transparent. Adică, prin acest fundal va fi posibil să vedem ce se află în spatele acestuia.

De exemplu, voi seta întreaga pagină ca imagine de fundal pe care am folosit-o mai devreme în exemple. Pentru blocul cu identificatorul bg, pe care efectuăm toate experimentele noastre, vom seta fundalul utilizând formatul de culoare rgba.

După cum am spus mai devreme, există multe formate în CSS pentru setarea culorilor. Unul dintre ele este rgb, un format destul de cunoscut pentru cei care lucrează în editori grafici... Este scris astfel: rgb (17, 255, 34);

Prima valoare dintre paranteze este saturația roșu, apoi verde, apoi albastru. Valoarea poate fi numerică de la 0 la 255. În consecință, formatul rgba nu diferă, se mai adaugă un singur parametru - canalul alfa. Valoarea poate fi de la 0 la 1, unde 0 este transparență completă.

Mulți designeri de layout începători, care tocmai se adâncesc în esența creării site-urilor web, se întreabă adesea cum să realizeze o imagine de fundal în html. Și dacă unii își pot da seama de această sarcină, atunci apar aceleași probleme în timpul întinderii imaginii pe toată lățimea monitorului. În același timp, aș dori ca site-ul să fie afișat la fel pe toate browserele, așa că trebuie îndeplinită cerința cross-browser. Puteți seta fundalul în două moduri: utilizarea și stilul CSS. Toată lumea alege pentru el cea mai bună opțiune. Desigur, stilul CSS este mult mai convenabil, deoarece codul său este stocat în fișier separatși nu ocupă coloane suplimentare în etichetele principale ale site-ului, dar mai întâi, să luăm în considerare o metodă simplă de a seta o imagine pe fundalul site-ului.

Etichete HTML de bază pentru crearea unui fundal

Deci, să trecem la întrebare, fundalul în html este pe ecran complet. Pentru ca site-ul să arate frumos, trebuie să înțelegeți un detaliu destul de important: trebuie doar să creați un fundal degradat sau să-l pictați cu o culoare solidă, dar dacă trebuie să introduceți o imagine în fundal, acesta nu se va întinde pe toată lățimea monitorului. Inițial, trebuie să selectați o imagine sau să creați singur un design cu o astfel de extensie în care veți afișa pagina site-ului. Doar după ce imaginea de fundal este gata, mutați-o într-un folder numit „Imagini”. În el vom stoca toate imaginile, animațiile și alte fișiere grafice utilizate. Acest folder ar trebui să fie în directorul rădăcină cu toate fișierele dvs. html. Acum puteți accesa codul. Există mai multe opțiuni pentru scrierea unui cod cu care fundalul se va transforma într-o imagine.

1. Scrieți eticheta de atribut.
2. Prin stilizarea CSS în cod HTML.
3. Scrieți stilul CSS într-un fișier separat.

Depinde de dvs. cum să faceți fundalul o imagine în HTML, dar aș dori să spun câteva cuvinte despre modul în care ar fi cel mai optim. Prima metodă prin scrierea prin atributul etichetei a fost învechită de mult timp. A doua opțiune este utilizată în cazuri foarte rare, doar pentru că se obține o mulțime de același cod. Și a treia opțiune este cea mai comună și mai eficientă. Aici Exemple HTML Etichete:

1. Primul mod de a scrie este prin intermediul atributului etichetei (body) din fișierul index.htm. Este scris în următoarea formă: (fundalul corpului = "Nume dosar / Numele_imagine.extensie") (/ corp). Adică, dacă avem o imagine cu numele „Picture” și extensia JPG și am denumit folderul drept „Images”, atunci codul HTML va arăta astfel: (body background = "Images / Picture.jpg") ... (/ corp) ...
2. A doua metodă de scriere afectează stilul CSS, dar este scrisă în același fișier numit index.htm. (stilul corpului = "background: url (" ../ Images / Picture.jpg ")").
3. Iar al treilea mod de înregistrare se face în două fișiere. Într-un document numit index.htm, este scris următorul rând: (head) (link rel = "styleheet" type = "text / css" href = "Path_ to CSS_file") (/ head). Și în foaia de stil denumită style.css scriem deja: body (background: url (Images / Picture.jpg ")).

Am analizat cum să faci din fundal o imagine în HTML. Acum trebuie să vă dați seama cum să întindeți imaginea la lățimea întregului ecran.

Modalități de a întinde imaginea de fundal la lățimea ferestrei

Să ne imaginăm ecranul ca procent. Se pare că întreaga lățime și lungime a ecranului vor fi 100% x 100%. Trebuie să întindem imaginea la această lățime. Adăugați o linie la înregistrarea imaginii din fișierul style.css, care va întinde imaginea la toată lățimea și lungimea monitorului. Cum este scris acest lucru în stil CSS? Este atat de simplu!

background: url (Images / Picture.jpg ")

dimensiunea fundalului: 100%; / * acest lucru va funcționa pentru majoritatea browserelor moderne * /

Așa că ne-am gândit cum să realizăm o imagine de fundal în html pe ecran complet. Există, de asemenea, o modalitate de a scrie în fișierul index.htm. Deși această metodă este depășită, este necesar ca începătorii să o cunoască și să o înțeleagă. În eticheta (head) (style) div (background-size: cover;) (/ style) (/ head), această intrare înseamnă că selectăm un bloc special pentru fundal, care va fi poziționat pe întreaga lățime a fereastră. Am analizat 2 moduri de a face din fundalul site-ului o imagine html, astfel încât imaginea să se întindă pe toată lățimea ecranului în oricare dintre browserele moderne.

Cum se face un fundal fix

Dacă decideți să utilizați o imagine ca fundal al unei viitoare resurse web, atunci trebuie doar să învățați cum să o faceți nemișcată, astfel încât să nu se întindă în lungime și să strice aspectul estetic. Este suficient de ușor să prescrieți acest mic adaos cu ajutorul. Trebuie să adăugați o frază în fișierul style.css după fundal: url (Images / Picture.jpg ") fix; sau, în schimb, adăugați o linie separată după punct și virgulă - poziție: fix. Astfel, imagine de fundal va deveni nemișcat. Pe măsură ce parcurgeți conținutul de pe site, veți vedea mișcarea liniilor de text și fundalul rămâne la locul său. Deci, ați învățat cum să creați o imagine de fundal în html în mai multe moduri.

Lucrul cu un tabel în HTML

Mulți dezvoltatori web fără experiență, când se confruntă cu tabele și blocuri, nu înțeleg adesea cum să facă o imagine în fundalul unui tabel în html. Ca orice și stilul CSS, acest limbaj de programare web este destul de simplu. Iar soluția la această problemă ar fi să scriem câteva linii de cod. Ar trebui să știți deja că ortografia rânduri de masăși coloanele sunt desemnate ca etichete (tr) și (td), respectiv. Pentru a crea fundalul tabelului sub formă de imagine, trebuie să adăugați o frază simplă la etichetă (tabel), (tr) sau (td) cu un link către imagine: fundal = URL al imaginii. Pentru claritate, iată câteva exemple.

Tabelele cu o imagine în loc de un fundal: exemple HTML

Să desenăm un tabel 2x3 și să-l facem imaginea de fundal salvată în folderul „Imagini”: (fundal tabel = „Imagini / Imagine.jpg”) (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabel). Aceasta ne va umple tabelul cu fundalul imaginii.

Acum să desenăm aceeași placă 2x3, dar introducem imaginea în coloanele numerotate 1, 4, 5 și 6. (tabel) (tr) (td background = „Images / Picture.jpg”) 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = „Images / Picture.jpg”) 4 (/ td) (td background = „Images / Picture.jpg”) 5 ( / td) (fundal td = „Imagini / Imagine.jpg”) 6 (/ td) (/ tr) (/ tabel). După vizualizare, vedem că fundalul apare doar în acele celule în care ne-am înregistrat și nu în întregul tabel.

Site cross-browser

Există, de asemenea, o resursă web inter-browser. Aceasta înseamnă că paginile site-ului vor fi afișate la fel de corect în tipuri diferiteși versiunile browserului. În același timp, trebuie să personalizați codul HTML și stilul CSS pentru browserele necesare. În plus, în era modernă a dezvoltării smartphone-urilor, mulți dezvoltatori web încearcă să creeze site-uri adaptate și pentru versiuni mobileși sub vizualizarea computerului.

Browserele moderne vă permit să adăugați un număr arbitrar de imagini de fundal unui element, listând opțiunile pentru fiecare fundal, separate prin virgule. Este suficient să folosiți fundalul proprietății universale și să specificați un fundal pentru acesta primul și al doilea separat prin virgule.

Cum întind fundalul pe toată lățimea ferestrei?

Proprietatea de dimensiune a fundalului este destinată scalării fundalului, 100% este specificată ca valoare, apoi fundalul va ocupa întreaga lățime a ferestrei browserului. Pentru versiunile mai vechi de browsere, ar trebui utilizate proprietăți specifice cu prefixe, așa cum se arată în Exemplul 1.

Cum pot adăuga 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 interiorul valorii URL a proprietății stilului de fundal, care este la rândul său adăugată la selectorul de corp.

Pot face un fundal animat?

Animația este o tehnică suficient de puternică care poate da viață oricărui document, așa că nu este surprinzător faptul că tehnologia Flash a câștigat o popularitate imensă, ceea ce adaugă desene animate paginilor web, în ​​plus, interactive. Formatul grafic GIF acceptă, de asemenea, cea mai simplă animație prin modificări secvențiale ale cadrelor. Deci, folosind o imagine în acest format, este permisă animarea nu numai a imaginilor individuale, ci și a fundalului unei pagini web sau a unui element specific.

Mai întâi, trebuie să creați o imagine animată în format GIF, pentru care să o puteți utiliza Programul Adobe Photoshop sau altul potrivit pentru acest scop. Există, de asemenea, biblioteci de fișiere animate gata făcute care pot fi utilizate 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 pot pune imaginea de fundal în colțul din dreapta jos al paginii?

Proprietatea stilului poziție fundal este utilizată pentru a controla poziția imaginii de fundal pe pagină; setează simultan coordonatele orizontale și verticale ale imaginii. Pentru a anula repetarea imaginii de fundal, utilizați proprietatea de poziție de fundal cu valoarea fără repetare.

Cum pot preveni repetarea fundalului?

Implicit, imaginea de fundal se repetă orizontal și vertical, aliniată într-un mozaic pe întregul câmp al paginii web. Cu toate acestea, acest comportament al fundalului nu este întotdeauna necesar, mai ales în cazul plasării unei singure imagini, astfel încât valoarea fără repetare adăugată proprietății stilului de fundal să fie salvată.

Cum fac repetarea fundalului doar pe verticală?

Repetarea fundalului este de obicei necesară pentru a crea linii decorative sau gradiente care se fixează la înălțimea unui element sau fereastră a paginii web. În astfel de cazuri, repetarea fundalului pe verticală oferă o imagine perfectă, indiferent de dimensiunea elementelor. Doar la început, ar trebui să vă îngrijoreze faptul că imaginea de fundal se repetă fără cusături.

În ultimul articol, am vorbit despre cum să schimbați culoarea de fundal pe site folosind atributele etichetei corpși stiluri CSS :. În acest articol, ne vom concentra asupra utilizării imaginilor ca fundal pe un site web, asupra modului de a întinde fundalul pe toată lățimea paginii și de a-l remedia.

Imagine ca fundal de pagină - HTML

Să analizăm mai întâi o modalitate de a seta o imagine de fundal pe un site folosind un atribut fundal etichetă corp:

Aici, imaginea de fundal este setată utilizând atributul de fundal al etichetei de corp.

Ca și în exemplul de mai sus, se recomandă, pe lângă imagine, să specificați culoarea de fundal (va fi afișată pe site în timpul încărcării paginii), care se va combina maxim cu imaginea de fundal și va crea un contrast cu textul de pe Site-ul. De exemplu, dacă utilizați culoarea textului alb pe site, atunci ar trebui să specificați o culoare de fundal închisă și să setați o imagine de fundal închisă. În acest caz, textul va fi ușor de citit.

Notă: Se recomandă setarea imaginii de fundal și a culorii de fundal nu folosind HTML, ci cu folosind CSS... În acest caz, codul va fi valid și mai corect.

Imagine ca fundal de pagină - CSS

În CSS, culoarea de fundal și imaginea de fundal pot fi setate cu o singură proprietate fundal:

Aici imaginea de fundal este setată folosind proprietatea CSS de fundal.

Aici folosind proprietatea atașament de fundal fundalul paginii este fix și se folosește proprietatea fundal-repetare setează imaginea să se repete orizontal. Dar merită luat în considerare faptul că imaginea de fundal ar trebui să fie bine „cusută” în jurul marginilor.

Dacă doriți să extindeți imaginea de fundal la dimensiunea completă a ferestrei browserului, utilizați proprietatea dimensiunea fundalului: 100%;

În constructorul site-ului „Nubex” pentru orice site pe care îl puteți utiliza imagine de ansamblu ca fundal și înghețați-l.

17.10.2015

Nu inca

Bună ziua tuturor!
Continuăm să învățăm elementele de bază ale HTML.
În această lecție vă voi spune și arăta cu exemple cum să faci fundal dintr-o culoare sau o imagine dintr-o pagină HTML.
Este destul de simplu!
Să începem cu culoarea!
Cred că nu ți-a lipsit, unde ți-am spus cum să schimbi culoarea textului și la sfârșitul articolului am dat coduri de culori și nuanțe diferite. De ce ți-am amintit de această lecție? Da, pentru că există o masă cu coduri gata făcute culori, ia-le și exersează imediat în această lecție.
Deci, cum să faci culoarea de fundal în HTML ...

Culoarea fundalului în HTML

Culoarea de fundal implicită într-un document HTML este albă. Cum setați culoarea după cum doriți?
Atributul „bgcolor” ne va ajuta în acest sens. Pentru a picta fundalul, adăugați acest atribut la eticheta „body”:

Sau așa:

Iată codul HTML complet:

Textul paginii va fi verde, iar fundalul negru.

Rezultatul va fi așa:

Dacă doriți să creați un fundal dintr-o imagine, adăugați atributul „baсkground” la eticheta „body”:

Completați orice imagine în care se află pagina dvs. web (de exemplu, pagina mea are numele „fon” cu extensia „.gif”):

Iată codul HTML complet:

Rezultatul va fi așa:

Dacă imaginea de fundal se află în folderul imagini sau în alt dosar, va arăta astfel:

Iată codul HTML complet:

Textul paginii pe un fundal frumos.

Asta e tot pentru astăzi! Cred că lecția nu a fost dificilă și înțelegi totul. Dacă aveți întrebări, scrieți în comentarii.
Te aștept în lecțiile următoare.

Postarea anterioară
Următorul post