Inserați imaginea de fundal html. Setarea unui fundal perfect în HTML

Vlad Merjevici

Datorită particularităților paginilor web, imaginile de fundal joacă un rol semnificativ în aspectul documentelor site-ului. În același timp, ei sunt implicați activ într-o varietate de lucruri, de exemplu, automatizarea procesului de atașare a imaginilor la text, crearea de tranziții în gradient și, desigur, adăugarea unui fundal sub conținut. Mai jos sunt câteva aspecte ale utilizării imaginilor de fundal.

Fundal pe o pagină web

Setarea unei imagini de fundal pe o pagină web are loc în mod tradițional prin atributul de fundal al etichetei. . Acest model se repetă orizontal și vertical, umplând astfel întreaga fereastră a browserului. Este clar că opțiuni speciale Nu este loc pentru creativitate aici, așa că haideți să ne întoarcem la stiluri și să vedem ce puteți face cu CSS.

CSS are cinci atribute care controlează imaginea de fundal: adăugarea, poziția și repetarea acesteia. Cu toate acestea, toți acești parametri sunt înlocuiți cu o proprietate universală, fundal, pe care o vom folosi în viitor.

Adăugarea unui tapet

Adăugarea unei imagini are loc prin setarea adresei imaginii folosind cuvântul cheie url. Pentru a controla repetarea unei imagini, se folosesc argumentele no-repeat, repeat-x (repeat orizontal) și repeat-y (repeat vertical). Datorită acestui lucru, puteți obține pagina web prezentată în Fig. 1.

Pentru a seta o imagine pe o pagină web, trebuie să adăugați o proprietate de stil de fundal la selectorul BODY, așa cum se arată în Exemplul 1.

Exemplul 1: imagine de fundal

ÎN în acest exemplu desen grafic target.gif este definit ca fundalul unei pagini web fără a repeta imaginea. Pentru a preveni ca imaginea să se potrivească strâns la marginile browserului, aceasta este deplasată cu 30 de pixeli la dreapta și cu 20 de pixeli în jos față de poziția inițială.

Repetarea unui model

Datorită faptului că puteți seta modelul de fundal să se repete orizontal sau vertical, sunt disponibile mai multe opțiuni pentru proiectarea paginilor web. De exemplu, pentru a crea dungă verticală pe marginea stângă (Fig. 2) veți avea nevoie de imaginea prezentată în Fig. 3.

Modelul ar trebui să fie astfel încât să se potrivească pe verticală fără cusături vizibile și, de asemenea, să formeze un singur întreg cu culoarea specificată fundalul paginii web. Exemplul 2 arată cum să creați o astfel de imagine de fundal, folosind din nou proprietatea de fundal și valoarea sa de repetare.

Exemplul 2. Repetarea fundalului pe verticală

În mod similar, puteți repeta fundalul pe orizontală, de exemplu, creând un gradient și setându-l ca imagine de fundal (Fig. 4).

Pentru a obține pagina web prezentată în Fig. 4, mai întâi va trebui să faceți o imagine cu o tranziție în gradient. Lățimea este suficientă pentru a specifica 20-40 pixeli, iar înălțimea imaginii depinde de scopul documentului și de înălțimea așteptată a conținutului paginii web. De asemenea, nu trebuie să uităm că desenul marime mare va duce la o creștere a dimensiunii fișierului grafic. Și acest lucru va afecta negativ viteza de încărcare și, în cele din urmă, va duce la afișarea mai lentă a fundalului. Pentru acest caz, o imagine de 30x200 pixeli era destul de potrivită (Fig. 5).

Exemplul 3 arată codul HTML pentru a crea un fundal gradient.

Exemplul 3: Repetare pe fundal orizontal

Un design gradient se potrivește bine cu un bloc cu o singură culoare, așa că în acest exemplu adăugăm un strat pentru a afișa conținutul paginii web.

Adăugarea unei imagini la text

Folosind o imagine de fundal, puteți automatiza procesul de adăugare a elementelor grafice unui anumit text, cum ar fi titluri. În acest scop este folosit proprietate universală fundal care se aplică selectorului dorit. Valoarea este calea către imagine și, pentru ca aceasta să nu se repete, argumentul fără repetare (exemplul 4).

Exemplul 4: Adăugarea unei imagini

Titlu

Textul principal

După cum se arată în acest exemplu, imaginea poate fi deplasată orizontal și vertical față de ea pozitia de pornire, implicit acesta este colțul din stânga sus element bloc. Deplasarea fundalului vă permite să poziționați imaginea în raport cu textul în modul dorit. Pentru a preveni suprapunerea textului cu imaginea, trebuie să adăugați proprietatea padding-left, datorită căreia textul este deplasat la dreapta cu distanța specificată. Este individual în fiecare caz și este de obicei egal cu lățimea imaginii plus spațiul dorit dintre imagine și text.

Setarea unei culori de fundal și/sau a unei imagini pentru o pagină sau pentru elementul ei individual este destul de simplă. Principalul lucru este să știți unde și cum să faceți acest lucru, precum și să aveți un cod de culoare și/sau o imagine de fundal. Este posibil să înveți o mulțime de lucruri noi din acest articol, dar l-am creat special pentru începători. Prin urmare, totul va fi cât mai scurt și detaliat în același timp. Principalul lucru este că veți obține nu numai o idee generală și exemple gata făcute, dar și o înțelegere a modului de a crea un fundal în HTML.

Pentru a seta fundalul în HTML, utilizați DOCTYPE intermediar

Și voi începe cu faptul că în HTML5 nu se poate seta. S-a decis să se adauge această caracteristică la CSS. Prin urmare, dacă intenționați să utilizați următoarele și doriți să obțineți un cod valid (corect), trebuie să alegeți tipul de document de tranziție. Pentru a face acest lucru, pagina dvs. web trebuie să înceapă cu următoarea linie:

Tranzitorie//RO" "http://www.w3.org/TR/html4/loose.dtd">

Cu asta din drum, să trecem la înțelegerea modului în care este creat fundalul. Și primul lucru de remarcat aici este diferența dintre culoare de fundal Și imagine de fundal. La inceput merge culoare de fundal, care inundă totul spatiu disponibil pagina sau elementul acesteia. Suprapus peste ea este o repetare imagine de fundal. Vizual, aceasta poate fi reprezentată după cum urmează:

Fundalul unui document HTML și elementele acestuia

Al doilea lucru pe care trebuie să-l știi este diferența dintre corpul documentuluiȘi element de document. Corpul documentului este indicat în codul HTML al unei pagini web prin eticheta BODY, care include întregul conținut al paginii web. Evident, fundalul corpului documentului nu poate fi transparent. Dacă fundalul corpului documentului nu este specificat, se utilizează valoarea implicită specificată în setările browserului.

Elementele paginii sunt în interiorul etichetei BODY. Este de remarcat faptul că nu este posibil să setați culoarea și/sau imaginea de fundal folosind HTML pentru toate elementele documentului. De exemplu, o imagine de fundal poate fi specificată numai pentru tabele. În mod implicit, acestea au de obicei un fundal transparent.

Atributul bgcolor pentru a crea o culoare de fundal

A întreba culoare de fundal documentul sau elementele sale folosesc atributul bgcolor, de exemplu:

În acest caz, setăm culoarea de fundal pentru întreaga pagină. Și iată un exemplu despre cum să setați culoarea de fundal pentru un tabel în eticheta TABLE:

Text cu fundal

Este de remarcat faptul că culoarea de fundal din tabel poate fi specificată pentru ambele rânduri din eticheta TR și pentru celulele acestora din eticheta TD.

Cum afli codul culorilor?

Probabil ați observat deja că culoarea în HTML este setată la o valoare specială cod, de exemplu: #ec008c . Pentru a afla codul culorii de care ai nevoie, poți folosi unul dintre editorii grafici. De exemplu, în Photoshop puteți folosi „ Instrument pentru picurare» (Pipetă) pentru a obține culoare dintr-un punct din imagine. Apoi, trebuie să faceți clic pe culoarea rezultată pe bara de instrumente și în fereastra care se deschide „ Selector de culoare» (Selectare culoare) copiați codul de culoare.

Vă rugăm să rețineți că acest cod nu va avea semnul lire sterline (#) la început; acest semn va trebui adăugat manual.

De asemenea, puteți folosi numeroase servicii on-line, De exemplu:

• etc.

Principiul lor de funcționare este și mai simplu - clic culoarea dorităși obțineți codul acestuia.

Atributul de fundal pentru a crea o imagine de fundal

La fel ca și în cazul culorii de fundal, iar în cazul imagine de fundal, Trebuie să utilizați atribut special, și anume fundal , de exemplu:

În acest caz, setăm o imagine de fundal pentru întreaga pagină. Este de remarcat faptul că, din cauza limitării dimensiunii imaginii, se va repeta, de exemplu:

După cum puteți vedea, atunci când este repetat, tranziția între imagini este vizibilă. Prin urmare, imaginile speciale sunt adesea folosite acolo unde acest punct este luat în considerare.

Și iată un exemplu despre cum să setați o imagine de fundal pentru un tabel în eticheta TABLE:

Text cu fundal

Este de remarcat faptul că o imagine de fundal poate fi setată numai pentru tabel în ansamblu și/sau pentru acesta celulă separată. Acest lucru nu va funcționa pentru un șir.

Calea absolută și relativă către imaginea de fundal

Merită să acordați o atenție deosebită adresa imaginii de fundal. În acest caz se folosește cale relativă la imagine, adică Adresa este specificată în raport cu locația fișierului imagine pentru fișierul paginii web. Această opțiune nu poate fi numită deosebit de reușită. Cel mai bine de folosit cale absolută la imagine, adică URL-ul său complet, De exemplu:

În acest caz, nu veți avea probleme conexe. Puteți citi mai multe despre asta.

Să rezumam

Utilizarea atributelor bgcolor și background este învechită, așa că pentru valabilitatea codului HTML va trebui să utilizați DOCTYPE de tranziție. Pentru a seta culoarea de fundal în HTML, utilizați coduri speciale, pe care îl puteți afla într-un editor grafic sau folosind servicii speciale online. Imagine de fundal este duplicat pe culoarele zonei alocate acestuia și se află deasupra culorii de fundal. Pentru a specifica o imagine de fundal, este mai bine să folosiți adresa URL completă. Asta e tot ce am. Vă mulțumim pentru atenție. Noroc!

la 22:37

Editați mesajul

De la autor: Bună ziua tuturor. Culorile și imaginile de fundal joacă un rol important în designul web, deoarece vă permit să proiectați orice elemente mai atractiv. Astăzi ne vom uita la cum să facem un fundal în HTML.

Este posibil să folosiți HTML pentru a seta fundalul?

O sa spun imediat ca nu. În general, html nu a fost creat pentru a proiecta pagini 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 Cascading Style Sheets (CSS). Există mult mai multe oportunități pentru a stabili un fundal. Astăzi ne vom uita la cele mai elementare.

Cum să setați un fundal folosind css?

Deci, în primul rând, trebuie să decideți pentru ce element doriți să setați fundalul. Adică trebuie să găsim un selector căruia îi vom scrie o regulă. De exemplu, dacă trebuie să setați fundalul pentru întreaga pagină ca întreg, puteți face acest lucru prin selectorul de corp și pentru toate blocurile prin selectorul div. Ei bine, etc. Fundalul poate și ar trebui să fie legat de orice alți selectori: clase de stil, identificatori etc.

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

Metoda cea mai des folosită cod hexazecimal. Pentru a selecta culorile, puteți utiliza un program care afișează codul culorilor. De exemplu, Photoshop, vopsea sau un instrument online. În consecință, ca exemplu, voi scrie un fundal general pentru întreaga pagină web.

corp (culoare de fundal: #D4E6B3; )

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

Imagine ca fundal

Voi folosi o pictogramă mică ca imagine. limbaj html:

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

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

Să-i dăm dimensiuni și fundal explicite:

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

#bg( latime: 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 în mod special inserării unei imagini ca fundal într-un element html. Să vedem ce s-a întâmplat:

Pentru a specifica o imagine, trebuie să scrieți după două puncte cuvânt cheie url, apoi indicați calea către fișier între paranteze. Î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, iar fundalul încă nu este afișat în bloc, verificați din nou dacă ați scris corect numele imaginii, dacă calea și extensia sunt setate corect. Acestea sunt cele mai multe motive comune faptul că fundalul pur și simplu nu este afișat, deoarece browserul nu poate găsi imaginea.

Dar ai observat un lucru? Browserul a preluat și a înmulțit imaginea pe tot blocul. Deci, ca să știți, acesta este comportamentul implicit al imaginilor de fundal - ele sunt repetate pe verticală și pe orizontală atâta timp cât pot încadra în bloc. Prin acest comportament, puteți controla cu ușurință. 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 pe axa x;

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

No-repeat – nu se repetă deloc;

Puteți scrie fiecare valoare și puteți vedea ce se întâmplă. O sa scriu asa:

background-repeat: repetare-x;

fundal - repetare : repetare - x ;

Acum repetați doar pe orizontală. Dacă setați opțiunea fără repetare, atunci ar fi o singură imagine.

Grozav, putem termina aici, deoarece acestea sunt capabilitățile de bază ale lucrului cu fundal, dar vă voi arăta încă 2 proprietăți care vă permit să obțineți mai mult control.

Prin repetare, designerii de layout erau capabili să creeze texturi de fundal și degrade folosind o singură imagine mică. Ar putea fi de 30 pe 10 pixeli sau chiar mai mic. Sau poate un pic 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 erau vizibile tranziții, astfel încât rezultatul a fost un fundal unic, fără sudură. Apropo, această abordare ar trebui folosită acum dacă doriți să o utilizați textură fără sudură pe site-ul dvs. ca fundal. Astăzi, un gradient poate fi deja implementat folosind metode css3, despre asta vom vorbi cu siguranță mai târziu.

Poziția de fundal

Mod implicit imagine de fundal, dacă nu este setat să se repete, va fi situat în colțul din stânga sus al blocului său. Dar poziția poate fi schimbată cu ușurință folosind proprietatea background-position.

Îl puteți seta în moduri diferite. O opțiune este să indicați pur și simplu părțile în care ar trebui să fie amplasată imaginea:

poziția de fundal: dreapta sus;

fundal - poziție: dreapta sus;

Adică pe verticală totul rămâne la fel: imaginea de fundal este situată deasupra, dar pe orizontală am schimbat partea în dreapta, adică în dreapta. O altă modalitate de a seta poziția este ca procent. Î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 poza exact în centru, o scriem astfel:

fundal-poziție: 50% 50%;

fundal-poziție: 50% 50%;

Amintiți-vă un lucru important despre 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%, atunci puteți concluziona imediat că imaginea de fundal va fi deplasată mult spre dreapta, dar nu va scădea prea mult.

Și, în sfârșit, puteți specifica poziția în pixeli. Totul este la fel, doar că în loc de % va fi px. În unele cazuri, o astfel de poziționare poate fi necesară.

Notație scurtă

Sunteți de acord că codul se dovedește a fi destul de greoi dacă totul este setat așa cum am procedat noi. Se pare că trebuie specificată calea către imagine, repetarea și poziția. Desigur, repetarea și poziția nu sunt întotdeauna necesare, dar, în orice caz, ar fi mai corect să folosiți o notație scurtă pentru proprietate. Arata cam asa:

fundal: #333 url(bg.jpg) no-repeat 50% 50%;

fundal: #333 url(bg.jpg) no-repeat 50% 50%;

Adică, primul pas este să înregistrați culoarea generală de fundal solidă, dacă este necesar. Apoi calea către imagine, repetare și poziție. Dacă nu este necesar un parametru, atunci pur și simplu omiteți-l. 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 formă prescurtată, chiar dacă trebuie să indicați doar o culoare sau o imagine.

Controlul dimensiunii imaginii de fundal

Imaginea noastră actuală nu este foarte bună pentru a demonstra următorul truc, așa că voi lua altul. Lasă-l de dimensiunea unui bloc sau mai mare. Așadar, imaginați-vă că vă confruntați cu sarcina de a realiza 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 mai rezonabilă opțiune ar fi să reduceți pur și simplu imaginea, dar nu este întotdeauna posibil să faceți acest lucru. Să spunem că se află pe server și în acest moment nu există timp sau oportunitate pentru a o reduce. Problema poate fi rezolvată folosind proprietatea background-size, care poate fi numită relativ nouă și care vă permite să manipulați dimensiunea imaginii de fundal, sau chiar orice fundal.

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

dimensiunea fundalului: 80% 50%;

dimensiunea fundalului: 80% 50%;

Din nou, primul parametru setează dimensiunea orizontală, al doilea - dimensiunea verticală. Vedem 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 influența proporțiile imaginii. Asa ca aveti grija daca vreti sa nu suparati proportiile.

După cum puteți ghici, dimensiunea fundalului poate fi specificată și în pixeli. Mai sunt două cuvinte cheie care pot fi, de asemenea, folosite:

Coperta – imaginea va fi scalată astfel încât cel puțin pe o parte să umple complet blocul.

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

Avantajul acestor valori este că nu schimbă proporțiile imaginii, lăsându-le la fel.

De asemenea, ar trebui 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 designerilor de layout. Toată lumea știe și înțelege că atunci când proiectați pentru desktop-uri, trebuie să adaptați site-ul la lățimile principale ale monitorului: 1280, 1366, 1920. Dacă luați o imagine de fundal cu o dimensiune de, să zicem, 1280 pe 200 și nu o dați o dimensiune de fundal, apoi vor apărea ecrane cu o lățime mai mare loc gol, imaginea nu va umple complet lățimea.

Î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. Acest bun venit, care ar trebui folosit, dar acum vă veți confrunta cu problema că utilizatorii cu lățimea ecranului de 1920 pixeli pot vedea o calitate suboptimă a imaginii.

Permiteți-mi să vă reamintesc, se va întinde până la lățimea maximă. În consecință, calitatea se va deteriora automat. Numai decizia corectă va folosi inițial imaginea de aici dimensiune mai mare– 1920 pixeli lățime. Apoi chiar la ecrane late va avea dimensiunea sa naturală, iar pe altele va fi pur și simplu decupat treptat, dar, în același timp, cu o selecție adecvată a imaginii de fundal, pe aspect Acest lucru nu va afecta site-ul.

În general, acesta este doar un exemplu despre cum să utilizați cunoștințele pe care le-ați dobândit în acest articol atunci când amenajați machete reale.

Fundal translucid folosind css

O altă caracteristică cu care se poate implementa folosind css – fundal translucid. Adică prin acest fundal se va putea vedea ce este în spatele lui.

De exemplu, voi seta întreaga pagină ca fundal pentru imaginea pe care am folosit-o mai devreme în exemple. Pentru blocul cu identificatorul bg, pe care ne desfășurăm toate experimentele, vom seta fundalul folosind formatul de setare a culorii rgba.

După cum am spus mai devreme, există multe formate pentru setarea culorilor în CSS. Unul dintre ele este rgb, destul format binecunoscut celor care lucrează în editori grafici. Se scrie astfel: rgb(17, 255, 34);

Prima valoare dintre paranteze este saturația de roșu, apoi verde, apoi albastru. Valoarea poate fi numerică de la 0 la 255. În consecință, format rgba nu este diferit, este adăugat doar un singur parametru - canalul alfa. Valoarea poate fi de la 0 la 1, unde 0 este transparența totală.

Mulți designeri de layout începători, care doar se adâncesc în esența creării site-urilor 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 cel mai mult pentru sine cea mai buna varianta. Desigur, stilul CSS este mult mai convenabil, deoarece codul său este stocat în dosar separatși nu ocupă coloane suplimentare în etichetele principale ale site-ului, dar mai întâi vom lua în considerare o metodă simplă de instalare a unei imagini pe 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 lucru: detaliu important: destul de ușor de făcut fundal gradient sau pictați-o într-o culoare solidă, dar dacă trebuie să introduceț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 altele folosite fisiere grafice. Acest folder ar trebui să se afle în directorul rădăcină cu tot fișiere 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ă. Aici Exemple HTML 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 browsere 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ă. Ne-am uitat la 2 moduri de a face fundalul unui site web 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ția: fix. Astfel, dvs. imagine de fundal va deveni nemișcat. Pe măsură ce parcurgeți conținutul de pe site, veți vedea asta șiruri de text mișcă, dar fundalul rămâne pe loc. Așa că 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, 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 tipuri diferiteși versiuni de browser. În acest caz, trebuie să ajustați codul HTML și stilul CSS la browserele necesare. În plus, în timpuri moderne dezvoltarea de smartphone-uri, mulți dezvoltatori web încearcă să creeze site-uri web adaptate pentru versiuni mobileși sub vizualizarea computerului.

Aproape fiecare site web popular are un aspect frumos. În designul site-ului web parte importantă este fundalul, numit și fundal, pe care fiecare dintre noi îl poate crea sau schimba. În acest articol vă voi spune cum să puneți un fundal pe un site web.

Crearea unui nou fundal pentru site-uri web

Pentru a finaliza sarcina, puteți utiliza una dintre cele 4 metode:

• 1. Fundal cu o singură culoare
• 2. Fundal cu textură
• 3. Fundal folosind un gradient
• 4. Fundal dintr-o imagine mare

Creați un fundal folosind o singură culoare

Pentru a crea sau a schimba fundalul site-ul, care constă dintr-o singură culoare, trebuie să mergeți la fișier stil.css, în care găsiți valoarea - corp (este responsabil pentru corpul principal al site-ului). Acum trebuie să înregistrați funcția de culoare de fundal dacă nu a existat și să specificați codul de culoare. În cazul în care trebuie să creați un fundal pentru site alb, atunci va trebui să scrieți următorul cod:

culoare de fundal: #83C5E9; (fond albastru, ca în exemplu)

Puteți găsi o listă completă de culori pe site - (STM). Pentru a schimba culoarea, pur și simplu schimbați valoarea după două puncte și bucurați-vă de eforturile voastre.

Crearea unui fundal folosind textura

Această metodă este deosebit de populară în În ultima vreme, deoarece vă permite să creați un fundal frumos pentru site. Texturile pot fi simple, dar foarte frumoase, motiv pentru care sunt adesea folosite. Pentru a conecta orice textură, trebuie să o încărcați în folderul de imagini de pe găzduirea unde este instalat site-ul dvs. După aceasta, ar trebui să scrieți următorul cod:

culoare de fundal: #537759;

imagine de fundal: url(images/pattern.png);

Acest cod conține un parametru familiar pentru menținerea culorii (este verde) și un element care este responsabil pentru conectarea texturii verde.

Realizarea unui fundal folosind un gradient

Orice imagine care este conectată prin funcții css, poate fi repetat atât pe orizontală, cât și pe verticală (de-a lungul axelor XȘi Y). Această oportunitate ne permite să creăm orice fundal simplu pentru site cu propriile noastre mâini. Pentru a face acest lucru, trebuie să creați un gradient de 1 megapixel lățime (vezi imaginea de mai jos), să îl salvați ca imagine și să îl încărcați pe găzduirea dvs. După aceasta, puteți scrie codul necesar, și anume:

culoare de fundal: #83C5E9;

imagine de fundal: url(images/gradient.jpg);

background-repeat: repetare-x;

În acest set, în ordinea priorităților, există o funcție responsabilă de culoarea de fundal, pe care o folosim pentru reasigurare. După aceasta, un parametru care este responsabil pentru conectarea gradientului și în cele din urmă o funcție care este responsabilă cu repetarea gradientului de-a lungul axei X.

Utilizarea unei imagini mari pentru fundalul site-ului

Această metodă este a doua cea mai populară deoarece vă permite să utilizați poze diverse pentru a crea un fundal. Pentru a implementa această metodă, trebuie doar să descărcați imagine mareîn folderul cu imaginile site-ului și scrieți următorul cod:

culoare de fundal: #000000;

imagine de fundal: url(imagini/titlu imagine.jpg);

fundal-poziție: centru sus;

background-repeat: fără repetare;

Dacă totul este clar cu primii doi parametri, atunci ultimii doi trebuie acoperiți. A treia funcție vă permite să fixați imaginea în centrul site-ului și ultimul parametru blochează repetarea acesteia în întreaga structură a paginii.

Schimbarea fundalului pe site-urile web ucoz

Aceste metode de creare a unui fundal pentru un site web pot fi utilizate pe sisteme diferite management site, dar nu pe site-uri - ucoz. Pentru a schimba fundalul pentru site-ul web ucoz, trebuie să accesați panoul de control al site-ului, accesați „Managementul designului”, și apoi în „Editarea șabloanelor”.

Acum trebuie să deschideți Foaia de stil (CSS), găsiți linia "corp"și parametru "fundal". După aceasta, trebuie să copiați linkul, să-l lipiți în browserul dvs. de internet și veți avea acces la imaginea care a fost fundalul.

Pentru a utiliza un fundal nou, trebuie doar să-l încărcați Manager de fișiere. În același timp, asigurați-vă că numele noii imagini de fundal este același ca înainte de modificare. Salvați-vă munca și accesați site-ul web pentru a vedea lucrările efectuate.

Schimbarea fundalului site-ului în HTML

Dacă doriți să faceți fundalul pe un site html folosind o imagine, atunci pur și simplu introduceți linia în cod:

Și dacă doriți să faceți fundalul site-ului folosind culoare, atunci linia ar trebui să arate astfel:

Aceasta încheie povestea noastră. Acum știi cum să faci un fundal pentru un site web. Proiecte fericite!