Imagine de fundal. Culoare de fundal

În această postare vă voi spune ca de obicei setați fundalul site-ului folosind HTML cod.

De asemenea, vă voi arăta un serviciu străin excelent pentru selectarea fundalurilor fără întreruperi.
În zilele noastre, setările site-ului sunt făcute mai ușoare și mai convenabile prin console CMS precum WordPress.
Poate fi necesar să schimbați șabloanele de site-uri web de vânzare, acest articol vă va ajuta în acest sens.

Dacă nu știi ce este HTML, atunci aceasta poate fi numită în general limba site-urilor sau un set de reguli prin care site-urile sunt generate.

De exemplu, vedeți o imagine pe un site web, dar în codul HTML al paginii poate arăta astfel:

Setați o culoare solidă pentru fundalul paginii.

Pentru a instala fundal de culoare solidă, trebuie să etichetați adauga atribut bgcolor.

< html >
< head >
< title >Titlul paginii.

< body bgcolor = "#ffcc00" >

Puteți lipi acest cod într-un fișier text și îl puteți salva cu extensia .html. Apoi deschideți-l cu orice browser și vedeți rezultatul.

După cum probabil ați ghicit, culoarea de fundal apare datorită codului de culoare din atribut bgcolor= „valoare”, care poate fi găsit accesând acest link.

Setarea unei imagini pe fundalul unei pagini HTML.

Pentru a setați imaginea pe fundal, puteți folosi atributul fundalîn etichetă .

< html >
< head >
< title >Titlul paginii.

< body background = "http://сайт/images/mlmsecret.jpg" >Buna ziua. Aceasta este prima mea pagină.

Este posibil să observați că atributul fundal este egală cu calea fișierului care este folosit ca fundal.

Pentru a schimba rapid fundalul sau orice imagine de pe pagină, trebuie doar să specificați noua cale către fișier folosind un editor de text.

Pentru a afla calea anterioară, trebuie să mergeți la pagina cu imaginea, faceți clic dreapta pe imagine și faceți clic pe „Copiați adresa URL a imaginii”. astfel vei vedea numele imaginii/fondului. Apoi puteți pur și simplu să înlocuiți vechea imagine cu a dvs., folosind același nume de fișier.

Acestea au fost cele mai simple elemente de bază pentru configurare fundal în html, acum vine partea interesantă. 🙂

Bine ati venit pe blogul meu. Să continuăm să învățăm elementele de bază ale html. Acest tutorial va fi atât de simplu și interesant încât sper că veți dori să aflați mai multe despre limbajele de programare. În doar câteva minute vei învăța cum să faci o imagine ca fundal în HTML și să obții rezultate excelente.

Voi vorbi și despre câteva nuanțe care vor face fundalul cât mai neted și frumos. Ei bine, începem?

Selectarea unei imagini

Aș dori să încep prin a alege o imagine. Pentru a arăta mai uniform și mai frumos pe pagină și nu trebuie să vă deranjați cu dimensiunile și alinierea. Vă sugerez să căutați imediat texturi fără sudură. Ce este?

Din păcate, este imposibil să întindeți o imagine în html pentru a umple întregul ecran. Fotografia este folosită la dimensiunea reală. Dacă imaginea este mică, atunci va acoperi întreaga zonă, ca în captura de ecran de mai jos. Pentru a întinde imaginea, va trebui să creați un document CSS suplimentar, fără acesta nu va funcționa.

Deși, aveți posibilitatea de a ocoli sistemul. Pentru a face acest lucru, utilizați Photoshop și imagini până la lățimea ecranului (1280x720). Deși în acest caz, la derularea în jos, imaginea va înlocui pe alta.

O opțiune mult mai bună dacă nu doriți să utilizați css este să utilizați texturi fără sudură. Nu au articulații vizibile. Sunt ca tapetul sau plăcile moderne în design. Unul îl înlocuiește pe celălalt și nu sunt vizibile îmbinări.

Dacă sunteți interesat de absența consecințelor legale pentru utilizarea lor, atunci vă recomand să căutați pe site Pixabay.com .

HTML

Acum să lucrăm cu codul. Ar trebui să remarc imediat că acum lucrăm cu html, adică schimbăm imaginea nu pentru întregul site, ci doar pentru o anumită pagină pentru care se scrie codul. Dacă sunteți interesat să schimbați întreaga resursă, atunci trebuie să codificați folosind css, Dar mai multe despre asta mai târziu.

Deci, puteți lucra în notepad, eu prefer NotePad++. Este mult mai convenabil să lucrezi în el: codul este completat pentru tine, etichetele sunt evidențiate. Programul este gratuit și cântărește aproximativ 3 MB. Îl recomand cu căldură, mai ales dacă ești începător.

Deci, la etichetă corp trebuie să adăugați un atribut fundalși indicați un link către imaginea de unde va fi făcută fotografia. Așa arată în program.

Puteți doar să deschideți notepad și să copiați acest cod. Între ghilimele, pune un link către poza care îți place.

Aș dori să notez pentru începători, acesta este ideea. Dacă luați o imagine de la Pixabay, atunci trebuie să lipiți linkul nu pe pagina cu imaginea, ci să deschideți imaginea în fila următoare.

Copiați această adresă URL exactă.

Salvați documentul. Nu uita că, dacă folosești notepad, trebuie să folosești extensia .html . Numiți documentul, de exemplu, înapoi.html . În caz contrar, va fi salvat ca document text, iar browserul pur și simplu nu va înțelege ce trebuie să facă.

Gata, pagina este umplută cu o culoare diferită.

Dacă doriți să aflați mai multe despre html, vă sugerez să descărcați curs gratuit de Evgeniy Popov . Din el veți învăța mai multe etichete, capacități lingvistice, veți încerca câteva tehnici noi și veți afla mai multe.

Nu voi spune că cursurile lui Evgeniy Popov sunt extrem de populare. Mulți experți îl certa, iar dacă ați dat peste astfel de afirmații, atunci iată părerea mea. Aceste lecții sunt oferite gratuit și, în ciuda acestui fapt, fac o treabă excelentă în sarcina lor principală - să arate începătorului elementele de bază și să-l actualizeze.

Așa cum fiecare scriitor are propria sa viziune despre cum să scrie, tot așa programatorii au propriul stil. Îți poți petrece întreaga viață învățând cum să creezi site-uri web, dar trebuie să începi de undeva. Din cărți? Nu asta. Da, conțin informații mai fiabile, informații actualizate, dar sunt atât de greu de stăpânit.

Nu sunteți de acord cu mine? Pot oferi o alternativă. Carte de Elizabeth și Erica Freeman Învățarea HTML, XHTML și CSS " Nu este un bestseller foarte plictisitor și a fost lansat nu cu mult timp în urmă, în 2016. Informațiile nu au devenit încă depășite.

CSS

Dacă aveți nevoie ca fundalul să fie repetat pe toate paginile site-ului dvs., atunci CSS este o necesitate. Desigur, puteți specifica calea de fiecare dată, ca în capitolul anterior. Dar imaginați-vă dacă în timp trebuie să îl înlocuiți: linkul devine depășit sau pur și simplu doriți să schimbați designul. Mergi la fiecare pagină și schimbi codul? Acest lucru nu va funcționa.

CSS ajută la rezolvarea acestei probleme. Trebuie să creați un fișier cu extensia css și să introduceți următorul cod:

Să vorbim puțin despre codul în sine. Între paranteze, după url puteți introduce un link către o imagine dintr-o sursă terță parte sau pur și simplu numele documentului dacă imaginea se află în același folder cu acest fișier.

Pentru cei care vor să știe mai bine

Cu css te poți întinde imagine de fundal, asigurați-vă că nu se repetă, adăugați animație GIF și multe altele.

Nu poți scrie totul într-un articol. Și nu mi-am propus o asemenea sarcină. Există o mulțime de subtilități, iar dacă promit că vă vor spune totul într-un singur articol, atunci aceasta nu este altceva decât o înșelăciune.

Vrei să înveți cum să scrii corect site-uri web? Vă recomand să învățați limbaje de programare. Pot recomanda cursul lui Andrey Bernatsky” HTML5 și CSS3 de la Zero la Pro " Îmi place foarte mult acest autor. Nu am urmat acest curs anume; în urmă cu câțiva ani era ceva asemănător, dar mai puțin modern.

Autorul vorbește foarte frumos, totul este ușor și de înțeles. Punctul culminant al acestui curs este că nu doar studiezi, ci creezi un site web specific împreună cu profesorul. Drept urmare, vei primi o carte de vizită, un blog și chiar un magazin online. Foarte tare. Puteți urmări primele trei lecții teoretice despre HTML5 de la acest curs chiar aici și acum.

Apropo, împreună cu acest curs primești 7 bonusuri: elementele de bază ale html și css de Andrei Bernatsky, aspect pentru începători, crearea unei pagini de destinație într-o seară și multe altele. Înainte de a vă angaja la un antrenament serios, încercați cursul gratuit " Exersați HTML5 și CSS3 ».

Ei bine, asta e tot. Abonați-vă la newsletter pentru a afla mai multe. Foarte curând vă voi spune puțin mai multe despre aspectul adaptiv, creșterea câștigurilor de la orice blog și vă voi oferi o mulțime de sfaturi utile pentru simplificarea muncii dvs. Ne revedem și mult succes în demersurile tale.

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ă ca valoare hexazecimală sau prin numele acesteia.

Deși puteți specifica orice culoare pentru fundal, majoritatea site-urilor folosesc un fundal predominant alb și litere negre ca opțiune cea mai stabilită.

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 unui tapet

Dacă imaginea este mai mică decât dimensiunea ecranului monitorului, aceasta va fi extinsă pe orizontală și pe verticală.

Deoarece imaginea de fundal se încarcă mai lent decât culoarea de fundal, s-ar putea să ajungeți cu text de necitit pentru o perioadă până când imaginile se încarcă. 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 vă permite să remediați fundalul folosind atributul etichetei bgproperties ="fixed". .

Exemplul 4: Setarea unui fundal fix

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.

Mulți designeri de layout începători, care doar aprofundează în esența creării de site-uri web, se întreabă adesea cum să facă din fundal o imagine în html. Și chiar dacă unii oameni își pot da seama de această sarcină, problemele apar la întinderea imaginii pe întreaga lățime a monitorului. În același timp, aș dori ca site-ul să fie afișat în mod egal pe toate browserele, deci trebuie îndeplinită cerința de cross-browser. Puteți seta fundalul în două moduri: folosind stilul CSS. Fiecare alege cea mai optimă opțiune pentru sine. Desigur, stilul CSS este mult mai convenabil, deoarece codul său este stocat într-un fișier separat și nu ocupă coloane suplimentare în etichetele principale ale site-ului, dar mai întâi, să ne uităm la o metodă simplă de setare a unei imagini la fundalul site-ului.

Etichete HTML de bază pentru crearea unui fundal

Deci, să trecem la întrebarea, fundal în html pe tot ecranul. Pentru ca site-ul să arate frumos, trebuie să înțelegeți un detaliu destul de important: este suficient să faceți un fundal gradient sau să îl pictați cu o culoare solidă, dar dacă trebuie să inserați o imagine în fundal, aceasta nu se va întinde. pe toată lățimea monitorului. Inițial, trebuie să selectați o imagine sau să faceți singur un design cu extensia în care va fi afișată pagina site-ului dvs. Numai după ce imaginea de fundal este gata, transferați-o într-un folder numit „Imagini”. În el vom stoca toate imaginile, animațiile și alte fișiere grafice pe care le folosim. Acest folder ar trebui să fie în directorul rădăcină al tuturor fișierelor dvs. html. Acum puteți trece la cod. Există mai multe opțiuni pentru scrierea codului care va schimba fundalul într-o imagine.

1. Scrieți atributul etichetei.
2. Prin stilul CSS în cod HTML.
3. Scrieți stilul CSS într-un fișier separat.

Cum să faci din fundal o imagine în HTML depinde de tine, dar aș dori să spun câteva cuvinte despre cum ar fi cel mai optim. Prima metodă, care utilizează scrierea printr-un atribut de etichetă, a fost demult depășită. A doua opțiune este folosită în cazuri foarte rare, doar pentru că se obține o mulțime din același cod. Și a treia opțiune este cea mai comună și eficientă. Iată exemple HTML de etichete:

1. Prima modalitate de a scrie este prin atributul tag (corp) din fișierul index.htm. Este scris sub următoarea formă: (body background= "Folder_name/Image_name.extension")(/body). Adică, dacă avem o imagine cu numele „Imagine” și extensia JPG și am numit folderul „Imagini”, atunci intrarea codului HTML va arăta astfel: (body background="Imagini/Imagine.jpg") … (/corp) .
2. A doua metodă de înregistrare afectează stilul CSS, dar este scrisă în același fișier numit index.htm. (body style="background: url("../Images/Picture.jpg")").
3. Și a treia metodă de înregistrare se face în două fișiere. Într-un document numit index.htm, este scrisă următoarea linie: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). Și în fișierul de stil numit style.css scriem deja: body (background: url(Images/Picture.jpg")).

Am discutat despre cum să faci o imagine de fundal în HTML. Acum trebuie să înțelegeți cum să întindeți imaginea pe lățimea întregului ecran.

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

Să ne imaginăm ecranul sub formă de procente. Se pare că întreaga lățime și lungime a ecranului va fi 100% x 100%. Trebuie să întindem imaginea la această lățime. Să adăugăm o linie la intrarea de imagine din fișierul style.css, care va întinde imaginea pe toată lățimea și lungimea monitorului. Cum este scris asta în stil CSS? E simplu!

fundal: url(Imagini/Imagine.jpg")

dimensiunea fundalului: 100%; /* această intrare este potrivită pentru majoritatea browserelor moderne */

Așa că ne-am dat seama cum să facem o imagine ca fundal în HTML pentru a umple întregul ecran. 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ă alocăm un bloc special pentru fundal, care va fi poziționat pe toată lățimea fereastră. Am analizat 2 moduri de a face din fundalul unui site web o imagine HTML, astfel încât imaginea să se întindă pe toată lățimea ecranului în orice browser modern.

Cum să faci un fundal fix

Dacă decideți să utilizați o imagine ca fundal al unei viitoare resurse web, atunci trebuie doar să aflați cum să o faceți nemișcată, astfel încât să nu se întindă în lungime și să nu strice aspectul estetic. Este destul de ușor să scrii acest mic adaos cu ajutor. Trebuie să adăugați o frază în fișierul style.css după fundal: url(Imagini/Imagine.jpg") fix; sau adăugați o linie separată după punct și virgulă - poziție: fix. Astfel, imaginea de fundal va rămâne nemișcată. În timpul Derulând prin conținutul de pe site, vei vedea că liniile de text se mișcă, dar fundalul rămâne pe loc. Așa că ai învățat cum să faci din fundal o imagine î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, adesea nu înțeleg cum să facă o imagine ca fundal de tabel în HTML. Ca toate stilurile CSS, acest limbaj de programare web este destul de simplu. Și soluția la o astfel de problemă ar fi să scrieți câteva linii de cod. Ar trebui să știți deja că scrierea rândurilor și coloanelor din tabel este denumită etichete (tr) și, respectiv, (td). Pentru a face fundalul tabelului sub forma unei imagini, trebuie să adăugați o expresie simplă la eticheta (tabel), (tr) sau (td) care indică un link către imagine: fundal = URL-ul imaginii. Pentru claritate, să dăm câteva exemple.

Tabele cu o imagine în loc de fundal: exemple HTML

Să desenăm un tabel 2x3 și să facem din fundal o imagine salvată în folderul „Imagini”: (fondul tabelului = „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). În acest fel, masa noastră va fi pictată pe fundalul imaginii.

Acum să desenăm aceeași placă cu dimensiunile 2x3, dar introduceți o imagine în coloanele numerotate 1, 4, 5 și 6. (tabel)(tr)(td background = „Imagini/Imagine.jpg”)1(/td) (td) )2 (/td) (td)3(/td)(/tr) (tr)(td fundal = „Imagini/Imagine.jpg”)4(/td) (Td fundal = „Imagini/Imagine.jpg”) 5( /td) (td fundal = „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.

Compatibilitate cross-browser a site-ului

Există, de asemenea, compatibilitatea între browsere a unei resurse web. Aceasta înseamnă că paginile site-ului vor fi afișate la fel de corect în diferite tipuri și versiuni de browsere. În acest caz, trebuie să ajustați codul HTML și stilul CSS la browserele necesare. În plus, în epoca modernă a dezvoltării smartphone-urilor, mulți dezvoltatori web încearcă să creeze site-uri adaptate atât pentru versiuni mobile, cât și pentru vizualizări de computer.

Orice cameră va arăta mult mai bine dacă podeaua ei este acoperită cu un covor persan scump. Deci de ce site-ul tău este mai rău? Poate că este timpul să-i „acoperiți” podeaua cu un covor scump, elegant, lucrat manual. Să aruncăm o privire mai atentă asupra modului de a crea un fundal pentru un site web:

Fundal pentru site

Se întâmplă că vechiul design al site-ului web a devenit plictisitor. Și vreau ceva nou și gustos. Și noul design va fi același dacă îl faci singur.

Dar schimbarea completă a întregului design al unei resurse este o sarcină ingrată. Și nu mâinile tuturor sunt antrenate corespunzător pentru această sarcină. Prin urmare, cel mai simplu mod de a reîmprospăta un șablon vechi este de a schimba culoarea de fundal a resursei sau imaginea de fundal a acesteia.

Există mai multe moduri de a schimba fundalul pe un site web. Pentru aceasta, sunt folosite capabilitățile CSS sau html. Dar multe dintre proprietățile pentru lucrul cu fundal au același nume și metodă de aplicare în aceste tehnologii web.

Bazele lucrului cu fundaluri în html

Mai multe elemente pot fi folosite ca fundal:

• Culoare;
• Imagine de fundal;
• Imagine cu textură.

Să ne uităm la utilizarea fiecăruia dintre ele mai detaliat.

Pentru a seta culoarea de fundal pentru un site, utilizați proprietatea background-color a atributului style. Adică, pentru a seta culoarea principală pentru o pagină web, trebuie să o scrieți în interiorul etichetei . De exemplu:

Fundalul site-ului #55D52B

Pe lângă codul de culoare hexazecimal, este acceptată o valoare în format cheie sau RGB. Exemple:

Fundal rgb pentru site-ul web(23,113,44)

Fondul site-ului verde

Setarea culorii de fundal folosind cuvinte cheie are o serie de limitări în comparație cu celelalte două metode.

HTML acceptă doar 16 cuvinte cheie pentru a seta culori. Iată câteva dintre ele: alb, rosu, albastru, negru, galben si altii.

Prin urmare, pentru a seta fundalul pentru un site html, este mai bine să utilizați formatul hexazecimal sau RGB.

Pe lângă selecția culorilor, sunt disponibile și alte opțiuni de personalizare. Dacă proprietatea background-color este setată la transparent , fundalul paginii va deveni transparent. Această valoare este atribuită implicit acestei proprietăți.

Acum să ne uităm la capacitățile limbajului hipertext pentru setarea unei imagini de fundal pentru un site. Acest lucru se poate face folosind proprietatea background-image.

După cum puteți vedea din cod, imaginea este legată prin calea URL specificată în paranteze. Dar nu toate imaginile sunt atât de mari încât dimensiunea lor umple întreaga zonă a ecranului. Să vedem cum va fi afișată imaginea mai mică.

Să presupunem că dezvoltăm un site web despre poezie și trebuie să folosim o imagine a lui Pegas ca fundal. Calul înaripat va personifica libertatea gândirii creatoare a poetului!

Avem nevoie ca imaginea să fie afișată în mijlocul ecranului o dată. Dar, din păcate, browserul nu înțelege dorințele noastre înalte. Și afișează o imagine mai mică pentru fundalul site-ului de câte ori poate găzdui zona ecranului:

Poate că patru cai zâmbitori cu aripi vor fi prea multă inspirație pentru poeți. Prin urmare, interzicem clonarea Pegasului nostru. Facem acest lucru folosind proprietatea background-repeat. Valori posibile:

• repeat-x – repetă imaginea de fundal pe orizontală;
• repetare-y – pe verticală;
• repetă – pe ambele axe;
• no-repeat – repetarea este interzisă.

Dintre opțiunile enumerate, ne interesează ultima. Înainte de a schimba fundalul site-ului, îl folosim în codul nostru:

Dar, bineînțeles, ar fi mai bine dacă fluturașul nostru s-ar afla în mijlocul ecranului. Proprietatea background-position este destinată tocmai poziționării imaginii de fundal pe pagină. Puteți seta coordonatele locației în mai multe moduri:

• Cuvânt cheie ( sus, jos, centru, stânga, dreapta);
• Procent – ​​numărarea începe din colțul din stânga sus;
• În unități de măsură (pixeli).

Să folosim cea mai simplă opțiune de centrare:

Se întâmplă că trebuie să remediați poziția unei imagini atunci când derulați. Prin urmare, înainte de a face o imagine ca fundal al site-ului, utilizați proprietatea specială background-attachment . Valorile pe care le accepta sunt:

• sul;


• fix.

Avem nevoie de ultima valoare. Acum codul nostru exemplu va arăta astfel:

Textura de fundal a site-ului web

În primul exemplu am folosit un peisaj deșert mare și frumos pentru fundal. Dar trebuie să plătești integral pentru o asemenea frumusețe. Greutatea unei imagini realizate la calitate înaltă poate ajunge la câțiva megaocteți.

Acest volum nu afectează în niciun fel viteza de încărcare a paginii a browserului cu o conexiune la Internet de mare viteză. Dar ce rămâne cu internetul mobil, când îl utilizați, încărcarea mai multor „metri” va dura mult timp?

Toate aceste probleme sunt rezolvate cu ajutorul unui fundal texturat. Utilizează o imagine mică ca model de textură. Chiar dacă se repetă de mai multe ori, desenul este încărcat o singură dată.

Pentru a crea un fundal întunecat pentru site, accesați Photoshop, creați o imagine sub forma unei benzi de 1200 de pixeli lungime și 15 pixeli lățime. Apoi aplicăm un gradient alb-negru simplu și conectăm textura rezultată la pagina site-ului:

Instrumente CSS

Toate proprietățile descrise mai sus se aplică și foilor de stil în cascadă. Să creăm un fundal al site-ului CSS prin rescrierea codului dintr-unul dintre exemplele noastre anterioare.