Cum să faci un fundal folosind html. Setarea unui fundal perfect în HTML

ÎN fundal html nu sunt specificate pentru site, aceasta este scrisă folosind stiluri CSS, dar aceasta este doar o formalitate teoretică. Acum să aflăm cum să determinăm acest fundal.

Fundal pentru un site web sau un bloc separat

Deoarece avem nevoie de un fișier css pentru a atinge acest obiectiv, trebuie să-l creăm și să-l conectăm la html. Despre asta este scris în. După aceasta puteți începe să lucrați. În primul rând, trebuie să decideți pentru ce doriți să setați fundalul. Dacă întreaga pagină în întregime, atunci o puteți face astfel:

Corp (culoare de fundal: alb; )

Adică accesăm eticheta body, care reprezintă întreaga noastră pagină. Pentru a seta culoarea de fundal, utilizați proprietatea background-color. Dar ce se întâmplă dacă trebuie să setați fundalul la un model mai degrabă decât o culoare solidă? Atunci ar trebui să scrii așa:

Corp (imagine de fundal: url (calea spre imagine. extensie imagine))

Pentru claritate, vă propun să privim totul mai detaliat folosind un exemplu. Pentru asta voi folosi această imagine:

De exemplu, imagine de fundal: url(comp.png) . În acest exemplu, setăm o imagine de fundal numită comp (așa am numit-o) format png, care se află în același folder cu fișierul css.
În html voi crea un bloc personalizat cu dimensiuni specifice, pentru a demonstra cum funcționează proprietățile CSS.

Și iată stilurile pentru el:

#ct( imagine de fundal: url(comp.png); lățime: 600px; înălțime: 400px; )

Iată ce avem:

De ce este așa? Faptul este că, implicit, browserul repetă imaginea de atâtea ori pentru a umple complet blocul. Uneori, acest lucru este necesar, de exemplu, atunci când utilizați modele fără sudură, dar în cazul nostru ar trebui să existe o singură imagine. Din fericire, acest lucru poate fi gestionat foarte ușor.

Repetați fundalul

Dacă aveți o imagine ca fundal, atunci implicit se va repeta pe orizontală și pe verticală pentru a umple întreg spațiul paginii. Pentru a elimina acest lucru, utilizați proprietatea background-repeat și valoarea sa fără repetare. Există, de asemenea, următoarele valori:

Repeat-x – repetă numai pe orizontală
Repet-y – numai pe verticală

Să adăugăm proprietăților fundalului nostru grafic:

Background-repeat: nu-repeat;

Poziţie

Proprietatea background-position determină locația în care va fi plasată imaginea. Două valori sunt specificate aici - pe orizontală și pe verticală. Exemple: background-position: dreapta jos– poziție în colțul din dreapta jos, stânga sus – în colțul de jos sus (și așa în mod implicit), 250px 500px – decalat de la colțul din stânga sus la dreapta cu 250 pixeli și în jos cu 500.

Să ne uităm mai bine la exemple:

Poziția de fundal: dreapta sus;

Imaginea se va muta în marginea din dreapta sus. Am dat blocului și un fundal galben pentru ca marginile acestuia să se vadă.

fundal-poziție: 50% 50%;

Imaginea a apărut exact centrată în blocul său. Da, da, acest lucru este posibil și datorită înregistrării procentuale a poziției.

fundal-poziție: 70% 20%;

Fundalul este deplasat cu 70% pe orizontală și cu 20% pe verticală.

De asemenea, este permisă specificarea unei valori negative a poziției în pixeli. Acest lucru se poate face, de exemplu, atunci când utilizați o imagine sprite mare și trebuie să puneți partea necesară a acestui sprite într-un bloc.

Blocați fundalul

De asemenea, îmi place foarte mult o proprietate numită background-attachment . Are doar două valori, iar prima este implicită (defilare). Aceasta înseamnă că, pe măsură ce derulați pagina, fundalul se va derula și, dacă utilizați o imagine fără repetare, aceasta va ajunge în cele din urmă și va fi doar o culoare solidă.

Pentru a preveni acest lucru, este specificat atașamentul de fundal: fix, iar acum fundalul nostru este fixat în siguranță. Acest lucru poate fi comparat cu modul în care poate fi definit un bloc poziționare fixăși nu va dispărea din pagină când o derulați.

O versiune prescurtată a tuturor acestor bunătăți

Am discutat multe proprietăți care vă permit să creați un fundal, dar dacă le folosiți pe toate, ajungeți la o înregistrare greoaie. Sunt foarte solutie eleganta. Proprietatea de fundal vă permite să scrieți un spațiu separat setările necesare in aceasta ordine:
Fundal: imaginea color repeta pozitia pinului;
Și acum totul poate fi scris așa:

Fundal: url galben(comp.png) fără repetare 20% 100px;

Dacă o proprietate nu trebuie definită, atunci este pur și simplu omisă (în cazul nostru, nu am scris atașament de fundal).

O mulțime de fundaluri

Ce se întâmplă dacă aveți nevoie de mai multe imagini de fundal? Se întâmplă, ce poți face? Astăzi, CSS acceptă această caracteristică. Hai să încercăm și noi. Să luăm această pictogramă

L-am numit laptop.

Și iată codul pentru a introduce multifonul:

Fundal: url(comp.png) fără repetare 20% 100px, url(laptop.png) fără repetare 50% 50%; culoare de fundal: galben;

După cum puteți vedea, trebuie doar să puneți o virgulă după prima imagine și să introduceți setările pentru a doua. În acest caz, este mai bine să setați o culoare solidă separat.

În același mod, puteți înregistra cât mai multe imagini doriți, dar nu exagerați - prea multe grafice nu sunt foarte bune.

Aici aș dori să închei acest articol. Puteți face multe alte lucruri interesante cu fundalul, voi încerca să scriu despre ele în viitor (și am scris deja ceva - de exemplu).

2 voturi

Bun venit pe blogul meu. Continuăm să înțelegem 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 mai uniform și mai 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 o imagine suplimentară document css, fără aceasta 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.

Mult cea mai buna varianta, dacă nu doriți să utilizați css, va exista o utilizare a texturilor 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 unul. pagină specifică, pentru care este scris 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.

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

Imagine de fundal

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ți că, dacă utilizați notepad, trebuie 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ă sugerez să descărcați curs gratuit Evgenia Popova . 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ă cu sarcina lor principală - să arate începătorului elementele de bază și să-l actualizeze.

Așa cum fiecare scriitor are propria sa părere despre cum să scrie, la fel 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, informatii la zi, 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? Nu va funcționa așa.

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 imagine din 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 astfel de 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 misto. 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 să te angajezi la un antrenament serios, încearcă cursul gratuit " Exersați HTML5 și CSS3 ».

Ei bine, asta e tot. Abonați-vă la newsletter pentru a afla mai multe. Foarte curand iti voi spune putin mai multe despre aspect adaptiv, mărește câștigurile de la orice blog și îți oferă multe sfaturi utile despre simplificarea muncii. Ne revedem și mult succes în demersurile tale.

Aproape fiecare site popular are un frumos aspect. Î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 fundal 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ă indicaț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, schimbați pur și simplu 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 poți scrie codul necesar, si 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 sfârșit, 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, iar 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 poza noua căci fundalul era la fel ca înainte de schimbare. 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!

Salutare prieteni! Am făcut recent o analiză a blogului meu pentru a găsi puncte slabe design și a ajuns la concluzia că fundalul arată foarte slab și nu se potrivește cu schema principală de culori a site-ului în ansamblu.

Acest lucru se datorează faptului că fundalul se potrivește cu culorile principale ale șablonului, asta mă irită puțin, iar ochii îmi sunt foarte obosiți.

În acest scurt articol vă voi spune cum să faceți și să schimbați fundalul site-ului, citiți cu atenție până la sfârșit și aflați ce a rezultat din el.

Cum să faci un fundal pentru un site online

Înainte de a crea fundalul, ar trebui să înțelegeți că nu ar trebui să alegeți o imagine mare pentru aceasta, care va crea doar încărcare suplimentară asupra proiectului, drept urmare va dura mult timp pentru a încărca.

Am scris despre cum să măresc viteza de încărcare a unui blog în articolele anterioare: „” și „”.

Prin urmare, cel mai bine este să utilizați PATTERN ca imagine de fundal.

Model este o imagine mică, fără cusături, care, atunci când se repetă, formează un fundal mare care umple întreg spațiul site-ului.

Există un număr mare de moduri de a crea un fundal (model). De exemplu, puteți deschide orice motor de căutare și puteți introduce interogarea în bara de căutare „Descărcați fundal pentru site”, iar apoi petreceți mult timp răsfoind diverse site-uri în speranța de a găsi un model potrivit.

Dar cum să faci un fundal cu un minim de efort? Vă sugerez să acordați atenție selecției serviciu online ov, care are sute de fundaluri gata făcute în baza de date, tot ce trebuie să faceți este să le editați și să le personalizați după bunul plac;

1) PatternCooler

Unul dintre cele mai mari depozite de o selecție de fundaluri. Aici puteți găsi un model de diferite texturi, puteți schimba singur parametrii de culoare și, de asemenea, alegeți unul popular din partea de sus.

Uite ce am putut alege pentru mine:

2) Stripegenerator

Nici rău generator online fundaluri. Există un număr mic de setări și o bază de date destul de mare de spații libere.

Rezultatul meu:

3) BgPatterns

Foarte serviciu interesant asupra creației fundal online. Puteți alege diferite modele (iniimi, stele, cercuri) și schema de culori fundal creat.

Uite ce am ales pentru mine:

4) Tartanmaker

Pentru cei care doresc să creeze un fundal în carouri pentru ei înșiși, ar trebui să vizitați acest serviciu de fundal online.

Cum se schimbă fundalul pe site-urile HTML și PHP

Dacă lucrați cu un site dezvoltat exclusiv în HTML, atunci va trebui să inserați un fundal în eticheta de deschidere ... Ar trebui să arate cam așa:

Dacă modelul principal nu este încărcat, culoarea specificată în bgcolor (FFFFFF) va fi încărcată.

Practic, majoritatea începătorilor și chiar webmasterilor avansați îl folosesc ca motor de blog. CMS WordPress, prin urmare, pentru a instala fundalul pe site, trebuie să încărcați modelul creat mai sus în folderul dvs. cu imaginile temei.

Pentru a face acest lucru, încarc o imagine (model) în găzduire, folderul se află la această adresă:

/ httpdocs/ wp- content/ themes/ Prosumer/ imagini

/httpdocs/wp-content/themes/Prosumer/images

fundal: #FFFFFF url(images/fon-1.png) repetare;

Setări de bază:

— repetare - imaginea se va repeta atât pe verticală, cât și pe orizontală;
— repeat-x - repetă numai pe orizontală;
— repeat-y - se repetă numai pe verticală;
— no-repeat – interzicerea repetării.

Încercați, experimentați, pentru că doar așa puteți crea sau schimba fundalul care se va armoniza cel mai bine cu designul site-ului.

Urmăriți videoclipul „Cum să schimbați fundalul pe un site web” și nu ar trebui să aveți întrebări.

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 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, rgb, rgba, formate hsl. Orice metodă 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

Pentru imagine o voi folosi pictogramă mică 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 și apoi în paranteze specificați calea către fișier. ÎN î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 au fost setate corect. Acestea sunt cele mai multe motive comune că fundalul pur și simplu nu apare 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 asta acum, din moment ce asta capabilități de bază lucrați cu fundalul, 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

În mod implicit, imaginea de fundal, cu excepția cazului în care este setată să se repete, va fi în partea stângă colțul de sus blocul tău. Dar poziția poate fi schimbată cu ușurință folosind proprietatea background-position.

Îl puteți seta în diferite moduri. 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 spre dreapta, adică dreapta. O altă modalitate de a seta o poziție 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%;

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 valoarea 80% 20%, atunci puteți concluziona imediat că imaginea de fundal va fi deplasată foarte mult la dreapta, dar nu va coborî 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%;

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 î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%;

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 de, să zicem, 1280 pe 200 și nu îi dați un fundal - dimensiune, apoi vor apărea ecrane cu o lățime mai mare spatiu 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 fi în dimensiunea sa naturală, iar pe altele va fi pur și simplu tăiat treptat, dar, în același timp, cu o selecție adecvată imagine de fundal, acest lucru nu va afecta aspectul site-ului.

Î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 sarcinii culori rgba.

După cum am spus mai devreme, există multe formate pentru setarea culorilor în CSS. Unul dintre ele este rgb, un format destul de cunoscut pentru cei care lucrează în el 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ță, formatul rgba nu este diferit, se adaugă doar un parametru - canalul alfa. Valoarea poate fi de la 0 la 1, unde 0 este transparența totală.