Fundalul paginii HTML5. Cum să setați culoarea de fundal în HTML. Modalități de a întinde o imagine de fundal la lățimea ferestrei

Găsiți antetul „html”. Ar trebui să fie în partea de sus a documentului.

Amintiți-vă sintaxa de bază pentru acest proces. Pentru a crea un gradient, trebuie să cunoașteți două cantități: punctul/unghiul de pornire și gama de culori care se vor estompa una în cealaltă. Puteți alege mai multe culori, astfel încât să se amestece între ele; De asemenea, puteți seta direcția sau unghiul tranziției.

fundal: gradient liniar (direcție/unghi, culoare1, culoare2, culoare3 și așa mai departe);

Creați un gradient vertical. Dacă nu specificați o direcție, gradientul va merge de sus în jos. Pentru a crea un astfel de gradient, introduceți următorul cod între etichete :

html (înălțime minimă: 100%;) corp (fond: -webkit- gradient liniar (#93B874, #C9DCB9); fundal: -o- gradient liniar (#93B874, #C9DCB9); fundal: -moz- liniar -gradient (#93B874, #C9DCB9): fundal-liniar (#93B874, #C9DCB9);

• Diferitele browsere implementează diferit funcționalitatea gradientului, așa că trebuie să adăugați mai multe versiuni ale codului.

1. Creați un gradient direcțional. Dacă nu doriți ca gradientul să ruleze pe verticală, specificați direcția în care se vor estompa culorile. Pentru a face acest lucru, introduceți următorul cod între etichete :

   html (înălțime minimă: 100%;) corp (fond: -webkit- gradient liniar (stânga, #93B874, #C9DCB9); fundal: -o- gradient liniar (dreapta, #93B874, #C9DCB9); fundal: -moz- liniar-gradient (dreapta, #93B874, #C9DCB9): fundal liniar-gradient (la dreapta, #93B874, #C9DCB9);

   • Dacă doriți, rearanjați cuvintele „stânga” și „dreapta” pentru a experimenta diferite direcții de gradient.

2. Utilizați alte proprietăți pentru a personaliza gradientul. Poți face cu el mai mult decât crezi.

   • De exemplu, după fiecare culoare puteți introduce un număr procentual. Aceasta va indica cât spațiu va ocupa fiecare segment de culoare. Iată un exemplu de cod cu acești parametri:

     fundal: gradient liniar (#93B874 10%, #C9DCB9 70%, #000000 90%);

   • Adăugați transparență culorii. În acest caz, se va estompa treptat. Pentru a obține un efect de estompare, utilizați aceeași culoare. Pentru a seta culoarea, aveți nevoie de funcția rgba(). Ultima valoare va determina transparența: 0 este o culoare opac și 1 este o culoare transparentă.

     fundal: gradient liniar (la dreapta, rgba ( 147 , 184 , 116 , 0 ), rgba ( 147 , 184 , 116 , 1 ));

Examinați codul. Codul pentru a crea un gradient de culoare ca fundal pentru o pagină web ar arăta cam așa:

< html > < head > < style >html (înălțime minimă: 100%;) corp (fond: -webkit- gradient liniar (stânga, #93B874, #C9DCB9); fundal: -o- gradient liniar (dreapta, #93B874, #C9DCB9); fundal: -moz- liniar-gradient (dreapta, #93B874, #C9DCB9): fundal liniar-gradient (la dreapta, #93B874, #C9DCB9); < body >

În HTML, imaginile sunt inserate folosind o etichetă img.
Etichetă img- gol, conține atribute și nu are etichetă de închidere.

Atributul este folosit pentru a afișa o imagine pe pagină src. Sr a venit de la sursă, ceea ce înseamnă Sursă. Valoarea atributului src este url Imagini.

Linia de mai sus înseamnă că imaginea se află în același director (dosar) ca și fișierul html care face legătura cu această imagine. Să presupunem că aveți un folder html, care contine index.html cu codul de mai sus și imaginea însăși cu titlul imagine.jpg.

În acest caz, la deschidere index.html Veți vedea această imagine în browserul dvs. Dacă îl aveți în altă parte (un folder mai sus sau mai jos), atunci veți vedea fie un câmp alb, fie un dreptunghi mic cu o cruce roșie (imaginea nu a putut fi încărcată).

Imaginile nu sunt întotdeauna localizate în același director (dosar) ca fișierul în sine, așa că specificarea căilor va fi descrisă mai specific puțin mai târziu.

atributele etichetei img

Pe lângă src, eticheta img are și alte atribute care sunt responsabile pentru dimensiunea imaginii afișate, legenda acesteia și așa mai departe.

src- adresa imaginii
lăţime- latimea imaginii
înălţime- înălțimea imaginii
titlu- semnătură care apare când treci cu mouse-ul peste imagine
alt- text alternativ. Necesar pentru robotul de căutare și indexarea imaginilor
frontieră- grosimea marginii imaginii. 0 - fără chenar, 1 - chenar cel mai subțire etc.

Adresa imaginii inserate (exemple)

De obicei, Imagini nu sunt stocate în același folder cu fișier html. În acest scop, se creează un folder în același director imagini(sau img, in functie de gust si culoare). Și toate imaginile necesare sunt deja plasate în el. În cazul stocării separate, va trebui să specificați o adresă diferită pentru atributul src

Dacă fișierul se află în folderul de mai sus, atunci așa

De asemenea, puteți insera o imagine de pe alt site cu totul, fără a o descărca în folderul dvs. Pentru a face acest lucru, trebuie să aveți o conexiune la Internet stabilă și aproximativ următorul cod, în care introduceți adresa imaginii de pe Internet în adresa:

Imagine de fundal în HTML

La fel de imagine de fundal fișierele cu extensii pot fi gif, jpg, jpegȘi png. Dacă dimensiunea imaginii este mai mică decât fereastra browserului, imaginea va continua automat să umple fundalul rămas. ÎN corp utilizați atributul fundal, în care specificăm calea către imagine

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 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 întregul ecran. 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, veți vedea că liniile de text se mișcă, dar fundalul rămâne pe loc Așa că ați învățat cum să faceți 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.

O zi bună tuturor celor care vor să învețe și să învețe ceva nou! Ați acordat vreodată atenție aspectului, în timpul dezvoltării căruia creatorii au fost prea leneși să proiecteze fundalul paginilor? Și am făcut. Arată rău. Adesea, din cauza lipsei diviziunilor obișnuite între diferitele tipuri de informații, acestea se amestecă și pur și simplu nu există dorința de a privi ceva mai departe pe o astfel de resursă web.

Pentru a preveni un astfel de dezastru să mi se întâmple, am decis să scriu un articol pe tema: „Cum să faci fundalul unei pagini în html”. După ce ați citit publicația, veți afla ce instrumente puteți utiliza pentru a seta designul de fundal, cum să faceți fundalul fixat sau schimbat și multe altele care vă vor ajuta să vă faceți site-ul atractiv. Acum să începem!

Instrumente de bază pentru setarea fundalului paginilor web

Pentru a seta o imagine de fundal, dezvoltatorii de limbaj web au furnizat atributul de fundal. Este disponibil atât în ​​, cât și în css.

În limbajul de marcare, acesta este un atribut al etichetei body, iar în foile de stil, este o proprietate universală care vă permite să setați până la 5 caracteristici de fundal în același timp. Fundalul este un element destul de flexibil care poate fi folosit pentru a seta fundalul sub forma unei singure culori, a unei imagini color sau chiar a unei animații.

Deci, pentru a seta imaginea de fundal prin unitatea html doar scrie următorul cod: ... iar în loc de cuvintele „adresă fișier” introduceți calea către imagine.

Cu toate acestea, vă rugăm să rețineți! Dacă doriți să vedeți o pânză cu o singură culoare ca fundal, specificată de o valoare din paleta de culori, atunci acest lucru se face folosind atributul bgcolor.

De exemplu, ..., am setat un fundal negru pentru site-ul nostru.

Culorile în css și html sunt specificate fie de un cuvânt englezesc (de exemplu, roșu), fie de un cod special, care constă din semnul # și șase caractere după acesta (de exemplu, #FFDAB9).

Când introduceți a doua opțiune în software specializat pentru dezvoltatori, paleta va apărea automat în fața dvs. Dacă tocmai ați început să învățați aceste limbi web, atunci puteți căuta codul de culoare pe Internet.

Fundalul ca proprietate în foile de stil în cascadă

Este setat fie într-un fișier separat cu stiluri css, fie într-un element

Pe această notă ne putem rezuma munca noastră. Alăturați-vă rândurilor abonaților mei fideli, puneți întrebări dacă ceva este neclar și nu fiți lacomi cu un link către blogul meu, ci împărtășiți-l prietenilor tăi. Vă doresc o experiență plăcută de învățare. Pa! Pa!

Cu stima, Roman Chueshov

Scopul acestei lecții este de a analiza modalități de organizare a unei imagini de fundal pentru un site web, care se va întinde întotdeauna pe întreaga fereastră a browserului.

Tehnica folosind doar CSS. Partea 1.

Folosind un element inline , care poate fi redimensionat în orice browser. Setăm proprietatea min-height pentru a umple fereastra browserului pe verticală și setăm proprietatea width la 100% pentru a o umple pe orizontală. Am setat, de asemenea, proprietatea min-width să fie egală cu lățimea imaginii, astfel încât să nu devină niciodată mai mică.

Trucul este să utilizați o interogare media pentru a verifica dacă lățimea ferestrei browserului este mai mică decât lățimea imaginii și să utilizați o combinație de o valoare procentuală pentru proprietatea din stânga și o valoare negativă pentru marginea din stânga pentru a centra fundalul imagine.

Iată codul CSS:

Img.bg ( /* Setați regulile de umplere a fundalului */ min-height: 100%; min-width: 1024px; /* Setați coeficientul de proporționalitate */ lățime: 100%; înălțime: auto; /* Setați poziționarea */ poziție: fixă: 0; stânga: 0 ) Ecranul media și (max-width: 1024px) ( /* Definit pentru fiecare imagine specifică */ img.bg ( stânga: 50%; 512px; / * 50% */ ) )

Lucrează în:

Orice versiune a unui browser normal: Safari / Chrome / Opera / Firefox.

IE 6: Nu funcționează - dar puteți folosi unele dintre trucurile de poziționare.

IE 7/8: Funcționează de cele mai multe ori, nu centrează imaginile mici, dar umple ecranul corect.

IE 9: Funcționează.

Tehnica folosind doar CSS. Partea 2.

O altă modalitate de a rezolva problema este plasarea unui element inline pe pagină, fixați-i poziția în colțul din stânga sus și setați proprietățile de lățime minimă și înălțime minimă la 100%, menținând factorul de proporționalitate.

#bg (poziție:fix; sus:0; stânga:0; /* Păstrați raportul de aspect */ min-lățime:100%; min-height:100%; )

Cu toate acestea, acest lucru nu centrează imaginea. Deci, să înfășurăm imaginea într-un element