U prošlom smo članku govorili o tome kako promijeniti boju pozadine na web stranici pomoću atributa oznaka tijelo i CSS stilovi: . Ovaj članak će govoriti o korištenju slika kao pozadine na web stranici, kako rastegnuti pozadinu na punu širinu stranice i popraviti je.

Slika kao pozadina stranice - HTML

Razmotrimo najprije metodu specificiranja pozadinska slika na web mjestu pomoću atributa pozadina označiti tijelo:

Ovdje je pozadinska slika postavljena pomoću atributa pozadine oznake tijela.

Kao u gornjem primjeru, preporuča se da osim slike odredite i boju pozadine (ona će biti prikazana na stranici dok se stranica učitava), koja će najbolje odgovarati pozadinskoj slici i stvarati kontrast s tekstom na stranici. Na primjer, ako koristite bijelu boju teksta na svojoj web stranici, trebali biste odrediti tamnu boju pozadine i postaviti tamnu pozadinsku sliku. U tom će slučaju tekst biti lako čitljiv.

Bilješka: Preporuča se postaviti pozadinsku sliku i boju pozadine ne pomoću HTML-a, već pomoću koristeći CSS. U tom slučaju kod će biti valjan i točniji.

Slika kao pozadina stranice - CSS

U CSS pozadina Nova boja i pozadinska slika mogu se postaviti u jednom svojstvu pozadina:

Ovdje je pozadinska slika postavljena korištenjem pozadinskog CSS svojstva.

Ovdje koristim imovinu pozadina-prilog pozadina stranice je fiksna i koristi se svojstvo pozadinsko ponavljanje postavlja se horizontalno ponavljanje slike. Ali vrijedi uzeti u obzir da bi pozadinska slika trebala biti dobro "zašivena" oko rubova.

Ako želite rastegnuti pozadinsku sliku na punu veličinu prozora preglednika, upotrijebite svojstvo veličina pozadine: 100%;

U alatu za izradu web stranica Nubex možete koristiti veliku sliku kao pozadinu za bilo koju web stranicu i prikvačiti je.

U ovom vodiču detaljno ćemo proučiti tehnologiju stvaranja responzivne pozadinske slike koja će zauzeti cijelo područje pregledavanja u pregledniku u bilo kojoj razlučivosti. I mi ćemo koristiti CSS - svojstvo veličine pozadine. Bez JavaScripta:

PRIMJER
PREUZMI IZVORE

Primjeri korištenja responzivnih pozadinskih slika

Danas su vrlo popularne stranice na kojima pozadinska slika pokriva cijelo prikazano područje stranice.
U nastavku su neke od ovih web stranica:

Jedriličarski kolektiv

Digitalna telepatija

Restoran Marianne

Ako želite postići sličan "izgled" u svom projektu, na dobrom ste putu.

Osnovni koncepti

Evo našeg plana igre.

Upotrijebite svojstvo veličine pozadine da pokrijete cijeli okvir za prikaz

Svojstvo CSS background-size može se postaviti na cover . Vrijednost naslovnice upućuje preglednik da automatski i proporcionalno skalira pozadinsku sliku po duljini i širini tako da ostane jednaka ili veća od širine/visine okvira za prikaz.

Upotreba medijskog upita za dobivanje manje verzije pozadinske slike za mobilne uređaje

Kako bismo smanjili vrijeme učitavanja stranice na malim razlučivostima zaslona, ​​koristit ćemo medijski upit za dobivanje manje verzije pozadinske slike. Ali to nije potrebno i može se izostaviti. Ova tehnologija radi odlično i bez toga.

Ali svejedno korištenje manjih verzija pozadine za mobilne uređaje nije loša ideja, a objasnit ću i zašto.
Slika koja će se koristiti u primjeru je veličine oko 5500 x 3600 px.

S ovom rezolucijom imamo prednost što postižemo pokrivenost cijelog područja gledanja na većini trenutno proizvedenih monitora širokog formata, ali nedostatak je veličina slike. Ovo je oko 1,7 MB.

Ostaviti toliko prostora za učitavanje samo pozadinske slike u svakom slučaju nije dobra ideja, au slučaju mobilnih uređaja je vrlo loša ideja. Osim toga, takva je rezolucija jednostavno nepotrebna na zaslonima niske rezolucije ( Reći ću vam više o ovome kasnije).

Tako. Započnimo.

HTML

Ispod je sve što vam je potrebno od oznake:

...Sadržaj vaše stranice...

Elementu tijela dodijelit ćemo pozadinsku sliku i tako postići potpunu pokrivenost pozadine.

Međutim, ova tehnika će raditi na bilo kojem blok elementu (kao što je div ili form). U slučaju da je širina-visina vašeg blok spremnika pomična, pozadinska slika će također promijeniti veličinu da ispuni cijelo područje spremnika.

CSS

Svojstva elementa tijela deklariramo na sljedeći način:

body ( /* Lokacija pozadinske slike */ background-image: url(images/background-photo.jpg); /* Pozadinska slika je centriran vodoravno i okomito */ background-position: center center; /* Pozadina se ne ponavlja */ background-repeat: no-repeat; /* Pozadina je fiksna u okviru za prikaz i stoga se ne pomiče kada visina sadržaja premaši visinu slike */ background-attachment: fiksno; /* Ovo svojstvo uzrokuje pozadina za promjenu razmjera kada se promijeni veličina spremnika koji sadrži */ background-size: cover; /* Boja pozadine koja će se prikazati prilikom učitavanja pozadinske slike */ background-color: #464646; )

Najvažnije svojstvo vrijednosti na ovom popisu je:

veličina pozadine: naslovnica;

Vrijedno je obratiti pozornost na to. Ovdje se događa čudo. Ovaj par vrijednost-svojstvo upućuje preglednik da skalira pozadinsku sliku u takvim omjerima da visina-širina ostane jednaka ili veća od visine-širine samog elementa. ( U našem slučaju ovaj element- tijelo.)

I tu dolazi do neugodne situacije s parom imovina-vrijednost. U slučaju kada će pozadinska slika imati nižu rezoluciju od dimenzija body elementa, a to se može dogoditi ili kada se stranica prikazuje na ekranima visoka rezolucija, ili kada imate gomilu sadržaja na stranici, preglednik će rastegnuti sliku.

I kao što znate, kada rastegnemo sliku izvan njezine stvarne veličine, gubimo kvalitetu slike ( drugim riječima, pojavljuje se pikselizacija):

Kad se slika smanji prema izvornoj veličini, kvaliteta slike se smanjuje.

Ne zaboravite na ovo kada birate pozadinu. U demo primjeru koristimo fotografiju veličine 5500 x 3600 px za veliki ekrani, pa je stoga u ovom slučaju malo vjerojatno da će se dogoditi nešto slično.

Kako bismo osigurali da je naša pozadina poravnata po sredini, izjavili smo sljedeće:

položaj pozadine: centar centar;

Ovo će postaviti osi skaliranja u središte okvira za prikaz.

Evo što ćemo učiniti. Postavimo svojstvo background-attachment na fixed kako bismo bili sigurni da slika ostaje na mjestu čak i ako se pomičemo prema dolje po stranici:

privitak pozadine: fiksno;

U demo primjeru uključio sam opciju " preuzeti neki sadržaj" tako da možete promatrati ponašanje pozadine prilikom pomicanja stranice.

Sve što trebate učiniti je preuzeti demo i malo eksperimentirati sa svojstvima pozicioniranja (background-attachment i background-position) da biste vidjeli kako utječu na ponašanje stranice i pozadine pri pomicanju.

Sljedeće vrijednosti svojstava su same po sebi razumljive.

CSS stenografija

Gore sam, radi jasnoće, u potpunosti definirao CSS svojstva.

A ovako izgleda skraćena verzija:

tijelo ( pozadina: url(background-photo.jpg) centar središnji naslov bez ponavljanja popravljeno; )

Sve što trebate učiniti je promijeniti vrijednost url-a u putanju do vaše slike.

Izborno: medijski upit za dobivanje manje verzije pozadinske slike

Za zaslone niže razlučivosti trebat će nam Photoshop za proporcionalno smanjenje razlučivosti slike na 768 x 505 px. Također sam ga pokrenuo kroz Smush.it da smanjim veličinu datoteke. To je omogućilo smanjenje veličine sa 1741 na 114 kilobajta. Ovo je smanjilo veličinu datoteke za 93%.

Nemojte me krivo shvatiti, ali 114 kilobajta je još uvijek dosta za korištenje za neke vrste web dizajna. A tih 114 kilobajta ćemo učitati samo ako je potrebno, jer gledajući statistiku, postoje kompromisi između dizajna stolnih i mobilnih uređaja.

A evo i samog medijskog upita:

Ključni dio medijskog upita je svojstvo max-width: 767px, što u našem slučaju znači da ako je okvir preglednika veći od 767px, koristi se velika slika.

Loša strana ove metode je da ako promijenite veličinu prozora preglednika s, recimo, 1200px na 640px (ili obrnuto), vidjet ćete treperenje zaslona dok se učitava manja ili veća slika.

I k tome, zbog činjenice da neki Mobilni uredaji može raditi na višoj rezoluciji - na primjer, iPhone 5 s Retina zaslonom rezolucije 1136 x 640px, manja će slika izgledati ružno.

Gotovo svaka popularna stranica ima lijepu izgled. Važan dio dizajna web stranice je pozadina, koja se naziva i podloga, koju svatko od nas može kreirati ili promijeniti. U ovom članku ću vam reći kako postaviti pozadinu na web stranicu.

Izrada nove pozadine za web stranice

Za dovršenje zadatka možete koristiti jednu od 4 metode:

• 1. Pozadina s jednom bojom
• 2. Pozadina s teksturom
• 3. Pozadina pomoću gradijenta
• 4. Pozadina iz velike slike

Napravite pozadinu koristeći jednu boju

Da biste stvorili ili promijenili pozadinu stranice, koja se sastoji od jedne boje, morate ići na datoteku stil.css, u kojem pronađite vrijednost - tijelo (odgovorno je za glavno tijelo stranice). Sada morate registrirati funkciju boje pozadine ako nije postojala i odrediti kod boje. U slučaju kada trebate napraviti bijelu pozadinu za web stranicu, morat ćete napisati sljedeći kod:

boja pozadine: #83C5E9 ; (plava pozadina, kao u primjeru)

Potpuni popis boja možete pronaći na web stranici - (STM). Za promjenu boje jednostavno promijenite vrijednost iza dvotočke i uživajte u trudu.

Stvaranje pozadine pomoću teksture

Ova metoda je posebno popularna u U zadnje vrijeme, jer vam omogućuje stvaranje prekrasne pozadine za web mjesto. Teksture mogu biti jednostavne, ali vrlo lijepe, zbog čega se često koriste. Da biste povezali bilo koju teksturu, morate je prenijeti u mapu sa slikama na hostingu na kojem je instalirana vaša stranica. Nakon ovoga trebate napisati sljedeći kod:

boja pozadine: #537759;

pozadinska slika: url(images/pattern.png);

Ovaj kod sadrži poznati parametar za održavanje boje (to je zelena) i element koji je odgovoran za povezivanje zelene teksture.

Izrada pozadine pomoću gradijenta

Svaka slika koja je povezana pomoću css funkcija može se ponoviti vodoravno i okomito (duž osi x I Y). Ova nam prilika omogućuje stvaranje bilo koje jednostavne pozadine za web mjesto vlastitim rukama. Da biste to učinili, trebate stvoriti gradijent širine 1 megapiksela (pogledajte sliku ispod), spremiti ga kao sliku i prenijeti na svoj hosting. Nakon toga možete napisati potreban kod, naime:

boja pozadine: #83C5E9;

pozadinska slika: url(images/gradient.jpg);

pozadinsko ponavljanje: ponavljanje-x;

U ovom skupu, prema redoslijedu prioriteta, postoji funkcija odgovorna za boju pozadine, koju koristimo za reosiguranje. Nakon toga, parametar koji je odgovoran za povezivanje gradijenta i na kraju, funkcija koja je odgovorna za ponavljanje gradijenta duž X osi.

Korištenje velike slike za pozadinu web stranice

Ova metoda je druga najpopularnija, jer vam omogućuje korištenje različitih slika za stvaranje pozadine. Da biste implementirali ovu metodu, trebate samo prenijeti veliku sliku u mapu sa slikama web-mjesta i unijeti sljedeći kod:

boja pozadine: #000000;

pozadinska slika: url(slike/naslov slike.jpg);

položaj pozadine: centar gore;

pozadinsko ponavljanje: bez ponavljanja;

Ako je sve jasno s prva dva parametra, onda je potrebno pokriti posljednja dva. Treća funkcija omogućuje fiksiranje slike u središtu web mjesta, a posljednji parametar blokira njezino ponavljanje kroz cijelu strukturu stranice.

Promjena pozadine na ucoz web stranicama

Te metode izrade pozadine za web stranicu mogu se koristiti na različitim sustavima za upravljanje sadržajem, ali ne i na web stranicama - ucoz. Kako biste promijenili pozadinu web stranice ucoz, morate otići na upravljačku ploču stranice, idite na "Upravljanje dizajnom", a zatim u "Uređivanje predložaka".

Sada morate otvoriti Style Sheet (CSS), pronaći liniju "tijelo" i parametar "pozadina". Nakon toga trebate kopirati link, zalijepiti ga u svoj internet preglednik i imat ćete pristup slici koja je bila pozadina.

Da biste koristili novu pozadinu, samo je trebate prenijeti na Upravitelj datoteka. Istodobno provjerite je li naziv nove pozadinske slike isti kao prije promjene. Spremite svoj rad i idite na web mjesto kako biste vidjeli obavljeni posao.

Promjena pozadine stranice u HTML

Ako želite napraviti pozadinu na html stranici pomoću slike, jednostavno unesite redak u kod:

A ako želite napraviti pozadinu stranice koristeći boju, tada bi linija trebala izgledati ovako:

Time završavamo našu priču. Sada znate kako napraviti pozadinu za web stranicu. Sretni projekti!

Svaka će soba izgledati mnogo bolje ako je pod presvučen skupim perzijskim tepihom. Pa zašto je vaša web stranica lošija? Možda je vrijeme da njegov pod "pokrijete" skupim, elegantnim ručno rađenim tepihom. Pogledajmo pobliže kako napraviti pozadinu za web stranicu:

Pozadina za stranicu

Događa se da stari dizajn Već sam umoran od stranice. I želim nešto novo i ukusno. A novi dizajn bit će tako ako ga skuhate svojim rukama.

No potpuno samostalno promijeniti cijeli dizajn resursa nezahvalan je zadatak. I nisu svačije ruke pravilno uvježbane za ovaj zadatak. Stoga je najlakši način za osvježavanje starog predloška promjena boje pozadine resursa ili njegove pozadinske slike.

Postoji nekoliko načina za promjenu pozadine na web stranici. Za to se koriste mogućnosti CSS-a ili html-a. Ali mnoga svojstva za rad s pozadinom imaju isti naziv i način primjene u tim web tehnologijama.

Osnove rada s pozadinama u html-u

Nekoliko elemenata može se koristiti kao pozadina:

• Boja;
• Pozadinska slika;
• Slika teksture.

Pogledajmo detaljnije upotrebu svakog od njih.

Da biste postavili boju pozadine za web mjesto, upotrijebite svojstvo boje pozadine atributa stila. To jest, da biste postavili glavnu boju za web stranicu, morate je napisati unutar oznake . Na primjer:

Pozadina web stranice #55D52B

Uz heksadecimalni kod boje, podržana je vrijednost u ključnoj riječi ili RGB formatu. Primjeri:

Pozadina web stranice rgb(23,113,44)

Zelena pozadina web stranice

Postavite boju pozadine pomoću ključne riječi ima niz ograničenja u usporedbi s druge dvije metode.

HTML podržava samo 16 ključnih riječi za postavljanje boja. Evo nekoliko njih: bijela, crvena, plava, crna, žuta i drugi.

Stoga, da biste postavili pozadinu za html stranicu, bolje je koristiti heksadecimalni ili RGB format.

Osim odabira boja, dostupne su i druge mogućnosti prilagodbe. Ako je svojstvo background-color postavljeno na transparentno, pozadina stranice će postati prozirna. Ova je vrijednost dodijeljena ovom svojstvu prema zadanim postavkama.

Sada pogledajmo mogućnosti jezika hiperteksta za postavljanje pozadinske slike za web mjesto. To se može učiniti korištenjem svojstva background-image.

Kao što možete vidjeti iz koda, slika je povezana preko url putanje navedenog u zagradama. Ali nisu sve slike toliko velike da svojom veličinom ispunjavaju cijelo područje zaslona. Da vidimo kako će manja slika biti prikazana.

Pretpostavimo da razvijamo web stranicu o poeziji i trebamo koristiti sliku Pegaza kao pozadinu. Krilati konj će personificirati slobodu pjesnikove kreativne misli!

Trebamo da se slika jednom prikaže na sredini ekrana. Ali, nažalost, preglednik ne razumije naše uzvišene želje. I prikazuje manju sliku za pozadinu stranice onoliko puta koliko površina zaslona može primiti:

Možda će četiri nasmijana konja s krilima biti prevelika inspiracija pjesnicima. Stoga zabranjujemo kloniranje našeg Pegaza. To radimo pomoću svojstva pozadinskog ponavljanja. Moguće vrijednosti:

• repeat-x – vodoravno ponavljanje pozadinske slike;
• repeat-y – okomito;
• ponoviti - na obje osi;
• no-repeat – ponavljanje je zabranjeno.

Od navedenih opcija, zanima nas posljednja. Prije promjene pozadine stranice koristimo je u našem kodu:

Ali, naravno, bilo bi bolje da se naš letak nalazi na sredini ekrana. Svojstvo background-position je upravo namijenjeno pozicioniranju pozadinske slike na stranici. Koordinate lokacije možete postaviti na nekoliko načina:

• Ključna riječ ( gore, dolje, sredina, lijevo, desno);
• Postotak – brojanje počinje od gornjeg lijevog kuta;
• U mjernim jedinicama (pikseli).

Upotrijebimo najjednostavniju opciju centriranja:

Dešava se da trebate popraviti položaj slike prilikom pomicanja. Stoga, prije nego što napravite sliku kao pozadinu stranice, upotrijebite posebno svojstvo background-attachment. Vrijednosti koje prihvaća su:

• svitak;


• fiksni.

Trebamo posljednju vrijednost. Sada će naš primjer koda izgledati ovako:

Pozadina teksture web stranice

U prvom smo primjeru za pozadinu koristili veliki i lijepi pustinjski krajolik. Ali za takvu ljepotu morate u potpunosti platiti. Težina slike izrađene u visoka kvaliteta, može doseći nekoliko megabajta.

Ovaj volumen ni na koji način ne utječe na brzinu učitavanja stranica preglednika s brzom internetskom vezom. Ali što s tim? mobilni internet, što će dugo trajati za učitavanje nekoliko "metara"?

Svi ovi problemi rješavaju se uz pomoć teksturirane pozadine. Koristi malu sliku kao uzorak teksture. Čak i ako se ponavlja mnogo puta, crtež se učitava samo jednom.

Trepačev D.P. 2012-2020

Učenicima: Imam godišnji odmor do 6. siječnja, tijekom odmora ću odgovarati koliko god bude moguće,
ponekad znam nestati na par dana

Layout JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Parsing Osnovni vodič HTML Referenca CSS referenca OOP i MVC vodič Video vodiči Osnovni vodič Referentni video vodiči Osnovni vodič Osnovni vodič Osnovni vodič Vodič za administratore Vodič za razvojne programere Vodič za AJAX+PHP

svojstvo pozadinskog privitka

Vlasništvo pozadina-prilog određuje kako se pomicati pozadinska slika element: zajedno s tekstom ili će tekst kliziti preko slike.

Sintaksa

Birač (pozadinski privitak: fiksno | pomicanje | lokalno; )

Vrijednosti

Zadana vrijednost: svitak.

Primjer. Vrijednost pomicanja

Sada vlasništvo pozadina-prilog postavljen svitak. Pomičite element okomito - vidjet ćete kako se tekst pomiče zajedno s pozadinom:

body ( background-attachment: scroll; background-image: url("bg.png"); ) #elem ( width: 400px; margin: 0 auto; text-align: justify; font-weight: bold; font-size: 20px; )

Primjer. Vrijednost pomicanja

A sada imanje pozadina-prilog postavljen fiksni. Pomičite element okomito i vidjet ćete kako tekst klizi po pozadini:

tijelo (pozadinski privitak: ispravljeno; pozadinska slika: url("bg.png"); ) #elem ( širina: 400px; margina: 0 automatski; poravnanje teksta: poravnavanje; težina fonta: podebljano; veličina fonta: 20px; )