Fundal frumos pentru pagina html. imagine de fundal

În ultimul articol, am vorbit despre cum să schimbați culoarea de fundal pe site folosind atributele etichetei. corpși stiluri CSS: . În articolul curent, vom vorbi despre utilizarea imaginilor ca fundal pe un site, despre cum să întindeți fundalul pe toată lățimea paginii și să-l remediați.

Imagine ca fundal de pagină - HTML

Să ne gândim mai întâi cum să setăm imaginea de fundal pe site folosind atributul fundal etichetă corp:

Aici, imaginea de fundal este setată folosind atributul de fundal al etichetei body.

Ca și în exemplul de mai sus, pe lângă imagine, este recomandat să specificați culoarea de fundal (aceasta va fi afișată pe site în timpul încărcării paginii), care va fi combinată cu imaginea de fundal pe cât posibil și va crea contrast cu text pe site. De exemplu, dacă utilizați culoarea albă a textului pe site-ul dvs., atunci ar trebui să specificați o culoare de fundal închisă și să setați o imagine de fundal întunecată. În acest caz, textul va fi ușor de citit.

Notă: Se recomandă ca imaginea de fundal și culoarea de fundal să fie setate nu cu HTML, ci cu 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 aceeași proprietate. fundal:

Aici, imaginea de fundal este setată folosind proprietatea CSS de fundal (CSS imagine de fundal).

Aici, folosind proprietatea atașament de fundal fundalul paginii este fix și se folosește proprietatea fundal-repetare este setată repetarea orizontală a imaginii. Dar merită să luați î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 generatorul de site-uri web Nubex, pentru orice site, puteți utiliza o imagine mare ca fundal și o puteți fixa.

2 voturi

Vă urez bun venit pe blogul meu. Continuăm să înțelegem elementele de bază ale html. Această lecție va fi atât de simplă și de interesantă încât sper că veți dori să aflați mai multe despre limbajele de programare. În doar câteva minute, veți învăța cum să faceți o imagine un fundal în html și să obțineți un rezultat excelent.

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

Selectarea imaginii

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

Din păcate, este imposibil să întindeți o imagine în html la ecran complet. Fotografia este folosită la dimensiune completă. 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 opțiunea 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, se va schimba imaginea cu alta.

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

Dacă vă interesează și 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ă nu schimbăm imaginea pentru întregul site, ci doar pentru o anumită pagină pentru care se scrie codul. Dacă sunteți interesat de modificări ale întregii resurse, atunci trebuie să codificați cu 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 scris pentru tine, etichetele sunt evidențiate. Programul este gratuit și cântărește aproximativ 3 MB. Recomand cu incredere, mai ales daca esti incepator.

Deci, în etichetă corp trebuie să adăugați un atribut fundalși specificați un link către imaginea de unde va fi luată imaginea. Iată cum arată în program.

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

<html> <cap> <titlu > imagine de fundal</titlu> </cap> <fundalul corpului = „https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png”> </corp> </html>

Aș dori să notez pentru începători, iată momentul. Dacă luați o imagine de pe pixabay, atunci trebuie să introduceți linkul nu pe pagina cu imaginea, ci să deschideți imaginea în fila următoare.

Copiați exact această adresă URL.

Salvați documentul. Nu uitați că, dacă utilizați notepad, va trebui să utilizați 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ă sfătuiesc să descărcați curs gratuit de Evgeny Popov . Din el vei afla mai multe etichete, caracteristici de limbă, vei încerca câteva trucuri noi și vei ști mai multe.

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

Așa cum fiecare scriitor are propriul mod de a scrie, tot așa programatorii au propriul stil. Puteți învăța cum să creați site-uri web toată viața, dar trebuie să începeți de undeva. Din cărți? Doar nu asta. Da, conțin informații mai de încredere, informații relevante, dar sunt atât de greu de stăpânit.

Nu sunteți de acord cu mine? Pot sugera o alternativă. Carte de Elizabeth și Eric 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 de un fundal care să se repete pe toate paginile site-ului dvs., atunci CSS este indispensabil. Desigur, puteți scrie 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 doriți doar 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 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 doar 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, faceți-o astfel încât să nu se repete, adăugați o animație gif și multe altele.

Nu poți scrie totul într-un articol. Da, și nu mi-am propus o asemenea sarcină. Există o mulțime de subtilități și, dacă vi se promite că vi se va spune totul într-un singur articol, atunci aceasta nu este altceva decât o păcăleală.

Vrei să înveți cum să scrii corect site-uri web? Vă recomand să studiați limbaje de programare. Pot sfătui cursul lui Andrey Bernatsky " HTML5 și CSS3 de la Zero la Pro ". Îmi place foarte mult acest autor. Nu am urmat anume acest curs, acum cativa ani exista deja ceva asemanator, dar mai putin modern.

Autorul este foarte drăguț și ușor de înțeles. Punctul culminant al acestui curs este că nu doar studiezi, ci creezi un site specific împreună cu un profesor. 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 de teorie 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 Andrey Bernatsky, aspect pentru începători, crearea unei pagini de destinație într-o seară și multe altele. Înainte de a vă angaja într-un antrenament serios, simțiți cursul gratuit " Practicarea HTML5 și CSS3 ».

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

Introducere

Dacă tot nu știi cum să instalezi un fundal pe un site, îți va fi util să citești acest articol. Din acesta veți învăța cum să setați o imagine ca imagine de fundal, să setați parametrii pentru afișarea acesteia sau pur și simplu să umpleți fundalul cu o anumită culoare.

CSS pentru a ne ajuta

După cum probabil ați ghicit, vom seta fundalul adăugând stiluri CSS la obiectul html. Proprietatea universală de fundal este responsabilă pentru afișarea fundalului unui element. Dacă trebuie să adăugați un fundal unui anumit element, atunci adăugați proprietăți CSS la id-ul sau clasa sa. Dacă pentru întregul site, atunci la eticheta corpului sau la identificatorul (clasa) containerului (învelișului), dacă se suprapune corpului. În acest articol, în exemple, vom lucra cu elementul body.

Umplere de culoare

Să începem cu cel mai simplu - umplerea cu o anumită culoare. Pentru a face acest lucru, trebuie să cunoaștem doar codul de culoare și proprietatea CSS de culoare de fundal.

Corp (culoare de fundal: #000; /* Umpleți fundalul cu negru */ )

Acest cod va seta un fundal negru solid pentru site-ul dvs. Orice altă culoare poate fi aleasă ca culoare de fundal prin schimbarea codului acesteia.

Dacă aplicați o umplere de fundal unui anumit element, cum ar fi un titlu (h1-h6), un paragraf (p), etc., asigurați-vă că culoarea textului nu se amestecă cu fundal și pierde lizibilitatea. Utilizați proprietatea color pentru a schimba culoarea textului.

P (culoare de fundal: #000; /* Umpleți fundalul cu negru */ culoare: #fff; /* Text alb pentru fundal negru */ )

imagine de fundal

Imaginea de fundal pentru un element este setată folosind proprietatea imagine de fundal, care folosește calea către fișierul imagine ca valoare. Calea către fișier este specificată folosind url( ), Unde Aceasta este calea către fișierul grafic. Dacă specificați doar numele fișierului, de exemplu, url(background.png), atunci în acest caz imaginea ar trebui să fie stocată în același folder cu fișierul css.

Este recomandat să creați un folder separat pentru toate imaginile și să specificați calea absolută către fișier, de exemplu. din folderul rădăcină. Acest lucru va îmbunătăți structura site-ului dvs. și vă va scuti de probleme dacă decideți să schimbați locația fișierului CSS în sine.

Corp ( imagine de fundal: url(/images/background.png); /* Calea absolută către imaginea de fundal background.png */ )

Dacă se folosește o imagine de fundal, se recomandă să specificați o umplere de culoare împreună cu aceasta (cu proprietatea background-color). În acest caz, dacă imaginea nu se încarcă (imaginea nu este disponibilă dintr-un motiv oarecare; utilizatorul a dezactivat afișarea imaginilor) sau se încarcă cu întârziere (imaginea se încarcă complet mai târziu decât pagina), atunci va fi o umplere de fundal. afișat în locul imaginii sau până când este complet încărcat.

Corp ( imagine de fundal: url(/images/background.png); /* Calea absolută către imaginea de fundal background.png */ culoare de fundal: #ab11cf; /* Umpleți fundalul cu o anumită culoare */ )

Aceste două proprietăți din exemplul de mai sus pot fi combinate într-una singură folosind proprietatea universală de fundal.

Corp ( fundal: #ab11cf url(/images/background.png); /* Culoarea de umplere și calea imaginii de fundal */ )

proprietate de fundal

Proprietatea universală de fundal vă permite să setați toate opțiunile de afișare pentru o imagine de fundal într-o singură linie. Să aruncăm o privire la opțiunile disponibile.

fundal: | moşteni

Ordinea valorilor poate fi arbitrară, iar dacă nu este specificată nicio proprietate, atunci este utilizată valoarea implicită.

atașament de fundal

Această proprietate determină dacă imaginea de fundal va derula împreună cu conținutul elementului. Dacă doriți să remediați imaginea, utilizați valoarea fixă. În acest caz, imaginea va fi nemișcată când derulați conținutul paginii. Dacă doriți ca imaginea să se mute cu conținutul site-ului, utilizați valoarea de defilare. Valoarea implicită este setată să deruleze.

Corp ( imagine de fundal: url(/images/background.png); /* Calea absolută către imaginea de fundal background.png */ background-attachment: fix; /* Imaginea este fixă ​​*/ culoarea de fundal: #ab11cf; /* Umpleți fundalul cu o anumită culoare */ )

Echivalent:

Corp (fundal: #ab11cf url(/images/background.png) fixat; /* Culoarea umplerii și calea imaginii de fundal fixă ​​*/ )

pozitia de fundal

Dacă este setată o imagine de fundal, atunci această proprietate determină poziția sa inițială. Are două valori separate printr-un spațiu: poziție orizontală și poziție verticală. Valorile pot fi setate folosind cuvinte cheie: stânga dreapta sus jos centru. Ordinea în care apar nu este importantă. Dacă valorile sunt specificate în procente, pixeli etc., atunci valoarea este specificată mai întâi pe orizontală, apoi pe verticală. În mod implicit, poziția este setată în colțul din stânga sus (stânga sus).

fundal-repetare

Specifică modul în care se repetă imaginea de fundal. Poate fi repetat doar pe orizontală (repeat-x), sau numai pe verticală (repeat-y), sau atât pe orizontală, cât și pe verticală (repetare), sau fără repetări (no-repeat). Valoarea implicită este repetarea.

moşteni

Folosit pentru a specifica în mod explicit moștenirea proprietăților de la un element părinte.

17.10.2015

Nu încă

Buna!
Continuăm să învățăm elementele de bază ale HTML.
În această lecție voi spune și voi arăta cu exemple cum să faci fundal dintr-o culoare sau imagine dintr-o pagină HTML.
Totul este destul de simplu!
Să începem cu culoarea!
Cred că nu ați ratat unde am vorbit despre cum să schimbați culoarea textului și la sfârșitul articolului am dat coduri pentru diverse culori și nuanțe. De ce ți-am amintit de această lecție? Da, pentru că există un tabel cu coduri de culoare gata făcute, luați-le și exersați imediat în această lecție.
Deci, cum să faci un fundal de culoare în HTML...

Culoare de fundal în HTML

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

Ori asa:

Iată codul HTML complet:

Textul paginii va fi verde, iar fundalul va fi negru.

Rezultatul va fi astfel:

Dacă doriți să faceți un fundal dintr-o imagine, adăugați atributul „background” 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 astfel:

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

Iată codul HTML complet:

Textul paginii pe un fundal frumos.

Asta e tot pentru azi! Cred că lecția nu a fost grea și ai înțeles totul. Dacă aveți întrebări, scrieți în comentarii.
Vă aștept cu nerăbdare la următoarele lecții.

Postarea anterioară
Postarea următoare

Î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 imaginea pe pagină. src. src 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 în sine, care se referă la 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în browser veți vedea această imagine. Dacă îl aveți în altă parte (un folder deasupra sau dedesubt), atunci veți vedea fie o casetă albă, fie un dreptunghi mic cu o cruce roșie (imaginea nu a putut fi încărcată).

Imaginile nu se află întotdeauna în același director (dosar) cu fișierul în sine, așa că căile vor fi descrise mai detaliat 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- o semnătură care este afișată când treceți 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 inserată (exemple)

Obișnuit, Imagini nu este stocat în același folder ca el însuși fișier html. Pentru a face acest lucru, un folder este creat în același director imagini(sau img, aici gustul si culoarea). Și toate imaginile necesare sunt deja plasate în el. În cazul stocării separate, va trebui să prescrieți o adresă diferită pentru atributul src

Dacă fișierul este un folder mai sus, atunci așa este

De asemenea, puteți insera o imagine de pe alt site fără a o încărca în folderul dvs. Pentru a face acest lucru, trebuie să aveți o conexiune stabilă la Internet și ceva de genul următor cod, în care scrieț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. În cazul în care dimensiunea imaginii este mai mică decât fereastra browserului, imaginea va continua automat să umple fundalul rămas. LA corp folosește atributul fundal, în care prescriem calea către imagine