Promjena pozadine stranice u html-u. prozirna pozadina sa css-om

Moderni pretraživači omogućavaju dodavanje elementu proizvoljan broj pozadinske slike, navodeći parametre svake pozadine odvojene zarezima. Dovoljno da se iskoristi univerzalno vlasništvo pozadinu i navedite jednu pozadinu za nju prvo i drugu odvojenu zarezom.

Kako rastegnuti pozadinu na punu širinu prozora?

Svojstvo background-size je namijenjeno za skaliranje pozadine, 100% je navedeno kao njegova vrijednost, tada će pozadina zauzeti cijelu širinu prozora pretraživača. Za starije pretraživače treba koristiti specifična svojstva prefiksa, kao što je prikazano u primjeru 1.

Kako dodati pozadinsku sliku na web stranicu?

Da biste dodali pozadinsku sliku na web stranicu, navedite putanju do slike unutar url vrijednosti svojstva pozadine stila, koja se zauzvrat dodaje selektoru tijela.

Da li je moguće napraviti animiranu pozadinu?

Animacija je dovoljno moćna tehnika koja može oživjeti svaki dokument, pa ne čudi ogromnu popularnost Flash tehnologija koja na web stranice, osim interaktivnih, dodaje i crtane filmove. Grafički format GIF takođe podržava najjednostavnija animacija uzastopnim promjenama okvira. Dakle, koristeći sliku u ovom formatu, dozvoljeno je animirati ne samo pojedinačne slike, već i pozadinu web stranice ili određenog elementa.

Prvo morate kreirati animiranu sliku GIF format za koje možete koristiti program Adobe Photoshop ili drugog pogodnog za ovu svrhu. Postoje i biblioteke gotovih animiranih datoteka koje se mogu koristiti kao pozadinska slika. Zatim se slika dodaje kao pozadina koristeći svojstvo stila pozadine, kao što je prikazano u primjeru 1.

Kako postaviti pozadinu u donjem desnom uglu stranice?

Za kontrolu položaja pozadinska slika svojstvo stila background-position se primjenjuje na stranicu, istovremeno postavlja horizontalne i vertikalne koordinate slike. Da biste zaustavili ponavljanje pozadinske slike, koristite svojstvo background-position sa vrijednošću no-repeat .

Kako učiniti da se pozadina ne ponavlja?

Podrazumevano, pozadinska slika se ponavlja vodoravno i okomito, popločavajući cijelo polje web stranice. Međutim, ovakvo ponašanje pozadine nije uvijek potrebno, posebno u slučaju jedne slike, tako da u pomoć dolazi vrijednost bez ponavljanja dodana svojstvu stila pozadine.

Kako mogu učiniti da se pozadina ponavlja samo okomito?

Ponavljanje u pozadini obično je potrebno za stvaranje ukrasnih linija ili preliva vezanih za visinu elementa ili prozora na web stranici. U takvim slučajevima, vertikalno ponavljanje pozadine daje čvrstu sliku bez obzira na veličinu elemenata. Prva stvar koju treba učiniti je da se u to uvjerite pozadinska slika ponavlja bez preklapanja.

Za kreiranje stranice važno je pitanje kako napraviti pozadinu u html-u. Ovaj postupak uključuje korištenje određenih oznaka − kodne riječi i pisma. Zahvaljujući njima, možete staviti drugačija pozadina, učinite jednobojnim - popunite ga ili stavite bilo koju sliku umjesto pozadine. Takve radnje će biti vrlo korisne za sve dizajnere izgleda, kao i za one koji sami odluče da "dotjeraju" svoju web stranicu.

Pravljenje pozadine

Prije nego što napravite pozadinu html stranice, morate je otvoriti uređivač teksta kod html stranice. Zapamtite da su oznake na stranici postavljene okomito. Zatim, između oznaka … , morate staviti oznaku- Ove oznake su potrebne da bi se razjasnio stil elemenata ove web stranice. Na mjesto tri tačke treba napisati - tijelo (pozadina:) . Ovo je postavka koja vam omogućava da postavite različitim stilovima za pozadinu stranice. Operaciju podešavanja boje možete izvršiti na dva načina. prvo:

Telo (pozadina:#000000) - Pozadina stranice bi sada trebala biti crna.

Ova metoda je također pogodna za postavljanje i boje i pozadinske slike. Nakon dvotočke možete staviti ili kod boje ili link do slike. Ili možete koristiti metodu koja samo znači postavljanje boje - određeno popunjavanje stranice. Nakon dvotočka potrebno je registrovati takozvani parametar - boju. I nakon njega stavite kod same boje. Ova metoda je dobra ako se koristi kao šablon. Registrujte ga i sačuvajte, a kada je potrebno - podesite boju, stavite na stranicu.

Može se staviti umjesto toga obična pozadina, slika. Ako trebate saznati: u html-u, kako napraviti sliku pozadinom, onda morate učiniti slične operacije. Registrirajte oznake, stavite tijelo (pozadina: link na sliku). Mora se imati na umu da sama slika može biti bilo gdje. I na web stranici na Internetu, ali najbolje je kreirati folder u korijenu dokumenta. U fascikli u kojoj će se pohranjivati ​​sve informacije o stranici web-mjesta potrebno je kreirati još jednu - za slike. Operacija će izgledati ovako:

Sada će slika koju ste odabrali biti pozadina cijele stranice stranice. Nadamo se da razumijete kako napraviti pozadinu u html-u. Samo probajte i sigurno ćete uspjeti!

Postavljanje boje pozadine i/ili slike za stranicu ili pojedinačni element je prilično jednostavno. Glavna stvar je znati gdje i kako se to može učiniti, kao i imati kod u boji i/ili pozadinsku sliku. Moguće je da ćete puno naučiti iz ovog članka, ali ja sam ga napravio posebno za početnike. Stoga će sve biti što kraće i detaljnije u isto vrijeme. Glavna stvar je da ćete dobiti ne samo opšta ideja I gotovi primjeri, ali i razumijevanje kako napraviti pozadinu u HTML-u.

Za postavljanje pozadine u HTML-u koristite srednji DOCTYPE

I počeću sa činjenicom da HTML5 ne postoji način da se podesi. Odlučeno je da se ova funkcija prenese u CSS. Stoga, ako planirate koristiti sljedeće, i želite dobiti važeći (ispravan) kod, morate se zaustaviti na prijelaznoj vrsti dokumenta. Da biste to učinili, vaša web stranica mora početi sljedećim redom:

Prijelazni//EN" "http://www.w3.org/TR/html4/loose.dtd">

Sada kada smo to pokrili, pređimo na razumijevanje kako se stvara pozadina. I prva stvar koju ovdje treba primijetiti je razlika između boja pozadine I pozadinska slika. Na početku ide boja pozadine koji ispunjava sve raspoloživog prostora stranica ili element. Preko nje je postavljeno ponavljanje pozadinska slika. Vizuelno, ovo se može prikazati na sljedeći način:

Pozadina HTML dokumenta i njegovih elemenata

Druga stvar koju trebate znati je razlika između tijelo dokumenta I element dokumenta. Tijelo dokumenta označen u HTML kodu web stranice oznakom BODY, koja uključuje sav sadržaj web stranice. Očigledno, pozadina tijela dokumenta ne može biti transparentna. Ako pozadina tijela dokumenta nije postavljena, koristi se zadana vrijednost postavljena u postavkama pretraživača.

Elementi stranice nalaze se unutar oznake BODY. Važno je napomenuti da je potrebno postaviti boju i/ili pozadinsku sliku HTML To nije moguće za sve elemente dokumenta. Na primjer, pozadinska slika se može odrediti samo za tabele. Podrazumevano, obično imaju prozirnu pozadinu.

Atribut bgcolor za kreiranje boje pozadine

Da biste postavili boja pozadine dokument ili njegovi elementi koriste atribut bgcolor, na primjer:

IN ovaj slučaj postavljamo boju pozadine za stranicu kao cjelinu. A evo i primjera kako postaviti boju pozadine za tablicu, u oznaci TABLE:

Važno je napomenuti da se boja pozadine u tabeli može specificirati i za redove u TR oznaci i za njihove ćelije u TD oznaci.

Kako pronaći kod boje?

Vjerovatno ste već primijetili da je boja u HTML-u određena posebnim kod, na primjer: #ec008c . Da biste saznali kod boje koja vam je potrebna, možete koristiti jedan od grafičkih uređivača. Na primjer, u Photoshopu možete koristiti " Alat za kapi za oči» (Pipeta) da dobijete boju iz tačke na slici. Zatim morate kliknuti na rezultirajuću boju na alatnoj traci iu prozoru koji se otvara " birač boja» (Odaberite boju) kopirajte kod boje.

Skrećem vam pažnju da će ovaj kod biti bez znaka funte (#) na početku, ovaj znak će biti potrebno dodati ručno.

Također možete koristiti brojne online usluge, na primjer:

• itd.

Njihov princip rada je još jednostavniji - klik željenu boju i uzmi njegov kod.

Atribut pozadine za kreiranje pozadinske slike

Kao iu slučaju boje pozadine, iu slučaju pozadinska slika, Morate koristiti poseban atribut, odnosno pozadina, na primjer:

U ovom slučaju postavljamo pozadinu za stranicu kao cjelinu. Važno je napomenuti da će se zbog ograničenja veličine slike ponoviti, na primjer:

Kao što vidite, pri ponavljanju je primetan prelaz između slika. Stoga se često koriste posebne slike, pri čemu je ovaj trenutak uzet u obzir.

A evo i primjera kako postaviti pozadinsku sliku za tabelu, u oznaci TABLE:

Važno je napomenuti da se pozadinska slika može postaviti samo za tabelu u cjelini i/ili njenu pojedinačnu ćeliju. Neće raditi za niz.

Apsolutna i relativna putanja do pozadinske slike

Posebnu pažnju treba posvetiti adresa pozadinske slike. U ovom slučaju se koristi relativna putanja do slike, tj. adresa je relativna u odnosu na lokaciju datoteke slike i datoteke web stranice. Ova opcija se ne može nazvati posebno uspješnom. Najbolje za upotrebu apsolutni put na sliku, tj. njegov puni URL, na primjer:

U ovom slučaju nećete imati nikakvih povezanih problema. Možete pročitati više o tome.

Sažimanje

Upotreba atributa bgcolor i background je zastarjela, tako da ćete morati koristiti prijelazni DOCTYPE da bi vaš HTML kod bio validan. Za posao boja pozadine u upotrebi HTML-a specijalni kodovi koje možete pronaći u grafički uređivač ili korištenjem posebnih online usluga. Pozadinska slika se duplira unutar područja koje joj je dodijeljeno i leži na vrhu boje pozadine. Da biste naveli sliku u pozadini, bolje je koristiti njen puni URL. To je sve za mene. Hvala na pažnji. Sretno!

IN html pozadina jer sajt nije postavljen, pisan je kroz css stilove, ali ovo je samo teoretska formalnost. A sada hajde da saznamo kako da definišemo ovu pozadinu.

Pozadina za web lokaciju ili zaseban blok

Pošto nam je potrebna css datoteka da bismo postigli ovaj cilj, moramo je kreirati i povezati sa html-om. Ovo je napisano u. Nakon toga možete krenuti na posao. Prvo morate odlučiti na što želite postaviti pozadinu. Ako je cijela stranica u cjelini, onda to možete učiniti ovako:

Tijelo (boja pozadine: bijela; )

To jest, pozivamo se na oznaku tijela, koja predstavlja cijelu našu stranicu. Svojstvo background-color se koristi za postavljanje boje pozadine. Ali šta ako želite da postavite pozadinu na grafiku umesto na jednobojnu? Onda bi trebalo da napišete ovako:

Body (pozadinska slika: url (put do slike. ekstenzija slike))

Radi jasnoće, predlažem da sve detaljnije razmotrimo na primjeru. Za ovo ću koristiti sljedeću sliku:

Na primjer, background-image: url(comp.png) . U ovom primjeru smo postavili pozadinsku sliku koja se zove comp (tako sam je nazvao) png formatu, koji se nalazi u istoj fascikli kao i css datoteka.
U html-u ću kreirati proizvoljan blok sa određenim veličinama kako bih demonstrirao rad css svojstava na njemu.

A evo i stilova za to:

#ct( background-image: url(comp.png); širina: 600px; visina: 400px; )

Evo šta smo dobili:

Žašto je to? Činjenica je da, prema zadanim postavkama, pretraživač ponavlja sliku toliko puta da u potpunosti popuni blok. Ponekad je to potrebno, na primjer, kada koristite bešavne ukrase, ali u našem slučaju treba biti jedna slika. Na sreću, ovo se može vrlo lako riješiti.

ponavljajuća pozadina

Ako imate sliku kao pozadinu, ona će se po defaultu ponavljati vodoravno i okomito kako bi popunila cijeli prostor stranice. Da bi se ovo uklonilo, koristi se svojstvo background-repeat i njegova vrijednost je no-repeat (ne ponavljaj). Tu su i ove vrijednosti:

• Repeat-x - ponovite samo horizontalno
• Repeat-y - samo okomito

Dodajmo osobinama naše grafičke pozadine:

background-repeat: bez ponavljanja;

Pozicija

Svojstvo background-position određuje gdje će se slika postaviti. Ovdje su postavljene dvije vrijednosti - vodoravno i okomito. Primjeri: background-position: desno dolje- pozicija u donjem desnom uglu, gore-lijevo - u donjem vrhu (i tako po defaultu), 250px 500px - pomak s lijeve strane gornji ugao desno za 250 piksela i dole za 500.

Pogledajmo bolje primjere:

background-position: gore desno;

Slika će se pomaknuti na gornji desni rub. Također sam bloku dao žutu pozadinu tako da mu se vide ivice.

pozadinski položaj: 50% 50%;

Slika se pojavila tačno u sredini svog bloka. Da, da, to je moguće i zbog procenta rekordnih pozicija.

pozadinski položaj: 70% 20%;

Pozadina je pomaknuta 70% horizontalno i 20% vertikalno.

Također je dozvoljeno specificirati negativnu vrijednost pozicije u pikselima. To se može učiniti, na primjer, kada koristite veliku sliku sprite-a i trebate blokirati željeni dio ovog sprite-a.

Kačenje pozadine

Također mi se jako sviđa jedno svojstvo koje se zove background-attachment. Ima samo dvije vrijednosti, a prva je zadana (scroll). To znači da kada pomičete stranicu, pozadina će se također pomicati, a ako koristite sliku bez ponavljanja, na kraju će se završiti i nastaviti samo jednobojnu boju.

Da se to ne dogodi, napisano je background-attachment: fixed i sada je naša pozadina sigurno fiksirana na mjestu. Ovo se može uporediti sa načinom na koji definišete fiksnu poziciju za blok i ona neće nestati sa stranice kada se skroluje.

Skraćeni zapis svih ovih dobrota

Analizirali smo mnoga svojstva koja vam omogućavaju da napravite pozadinu, ali ako ih sve primijenite, dobit ćete glomaznu notaciju. Postoji vrlo elegantno rješenje. Svojstvo pozadine vam omogućava da pišete kroz razmak željene postavke ovim redoslijedom:
Pozadina: pozicija zakačenja ponavljanja slike u boji;
A sada se sve može napisati ovako:

Pozadina: žuti url(comp.png) bez ponavljanja 20% 100px;

Ako neko svojstvo ne treba definirati, onda se jednostavno izostavlja (u našem slučaju nismo napisali background-attachment).

Mnogo pozadina

Šta ako vam treba nekoliko pozadinske slike? Desi se, šta da se radi. Danas css podržava ovu funkciju. Hajde da probamo i to. Uzmi ovu ikonu

Nazvao sam ga laptop.

A evo i koda za ugradnju multifona:

Pozadina: url(comp.png) bez ponavljanja 20% 100px, url(laptop.png) bez ponavljanja 50% 50%; boja pozadine: žuta

Kao što vidite, sve što treba da uradite je da stavite zarez iza prve slike i podesite podešavanja za drugu. Jednobojnu boju u ovom slučaju bolje je postaviti zasebno.

Na isti način, možete snimiti više slika koliko želite, ali nemojte pretjerivati ​​- previše grafike nije baš dobro.

Ovdje bih želio završiti ovaj članak. Možete raditi mnoge druge zanimljive stvari sa pozadinom, pokušaću da pišem o njima u budućnosti (a već sam nešto napisao - npr.).

Želim vam dobrodošlicu na moj blog. Nastavljamo da shvatamo osnove html-a. Ova lekcija će biti toliko jednostavna i zanimljiva da ćete, nadam se, htjeti naučiti više o programskim jezicima. Za samo nekoliko minuta naučit ćete kako napraviti sliku pozadinom u html-u i postići odličan rezultat.

Također ću govoriti o nekim nijansama koje će pozadinu učiniti najujednačenijom i najljepšom. Pa, hoćemo li početi?

Izbor slike

Želio bih početi odabirom slike. Tako da na stranici izgledate ujednačenije i ljepše, a ne morate se zamarati veličinama i poravnavanjem. Predlažem da odmah potražite bešavne teksture. Šta je to?

Nažalost, nemoguće je rastegnuti sliku u html-u na cijeli ekran. Fotografija je korištena u punoj veličini. Ako je slika mala, onda će pokriti cijelo područje, kao na slici ispod. Da biste proširili sliku, morat ćete kreirati dodatnu css dokument, neće raditi bez toga.

Iako, imate opciju da zaobiđete sistem. Da biste to učinili, koristite Photoshop i slike do širine ekrana (1280x720). Iako će u ovom slučaju, prilikom pomicanja prema dolje, promijeniti sliku na drugu.

Mnogo najbolja opcija ako ne želite koristiti css, koristit ćete bešavne teksture. Ne vide nikakve šavove. Dizajnom su poput tapeta ili modernih pločica. Jedno zamjenjuje drugo i spojevi se ne vide.

Ako vas zanima i nepostojanje pravnih posljedica za njihovo korištenje, onda preporučujem pretragu na stranici pixabay.com .

HTML

Sada radimo sa kodom. Odmah moram napomenuti da sada radimo sa html-om, odnosno mijenjamo sliku ne za cijelu stranicu, već samo za jednu određena stranica, za koji se piše kod. Ako ste zainteresirani za promjene na cijelom resursu, onda trebate kodirati s css, Ali više o tome kasnije.

Dakle, možete raditi u Notepadu, ja više volim NotePad++. Mnogo je praktičnije raditi u njemu: kod je napisan za vas, oznake su istaknute. Program je besplatan i težak je oko 3 MB. Topla preporuka, pogotovo ako ste početnik.

Dakle u oznaci tijelo morate dodati atribut pozadini i odredite vezu do slike odakle će slika biti preuzeta. Evo kako to izgleda u programu.

Možete jednostavno otvoriti notepad i kopirati ovaj kod. Pod navodnicima stavite link do slike koja vam se sviđa.

Želio bih napomenuti za početnike, evo trenutka. Ako uzmete sliku sa pixabaya, onda morate umetnuti vezu ne na stranicu sa slikom, već otvoriti sliku u sljedećoj kartici.

Kopirajte tačno ovaj URL.

Sačuvajte dokument. Ne zaboravite da ako koristite notepad, morat ćete koristiti ekstenziju .html . Samo imenujte dokument, na primjer, back.html . U suprotnom će biti sačuvan kao Tekstualni dokument a pretraživač jednostavno neće razumjeti šta treba da uradi.

Gotovo, stranica je ispunjena drugom bojom.

Ako želite saznati više o html-u, savjetujem vam da preuzmete besplatni kurs Evgenia Popova . Iz njega ćete naučiti više oznaka, jezičkih karakteristika, isprobati neke nove trikove i saznat ćete više.

Ne mogu reći da su kursevi Jevgenija Popova veoma popularni. Mnogi stručnjaci ga grde, a ako naiđete na takve izjave, evo mog mišljenja. Ove lekcije su besplatne i uprkos tome odlično rade svoj glavni zadatak - da početniku pokažu osnove, da ga upoznaju sa novostima.

Kao što svaki pisac ima svoj način pisanja, tako i programeri imaju svoj stil. Možete učiti kako da kreirate web stranice cijeli život, ali morate od nečega početi. Iz knjiga? Samo ne ovo. Da, sadrže pouzdanije informacije, relevantne informacije, ali ih je tako teško savladati.

Ne slažete se sa mnom? Mogu predložiti alternativu. Knjiga Elizabeth i Erica Freemana Učenje HTML-a, XHTML-a i CSS-a ". Ne baš dosadan bestseler i objavljen je ne tako davno, 2016. Informacije još nisu zastarjele.

css

Ako vam je potrebna pozadina koja se ponavlja na svim stranicama vašeg sajta, onda je CSS neophodan. Naravno, možete svaki put napisati putanju, kao u prethodnom poglavlju. Ali zamislite ako ga s vremenom trebate zamijeniti: veza postaje zastarjela ili samo želite promijeniti dizajn. Ići na svaku stranicu i promijeniti kod? Neće raditi.

CSS pomaže u rješavanju ovog problema. Morate kreirati css datoteku i unijeti sljedeći kod:

Hajde da pričamo malo o samom kodu. u zagradama nakon url možete unijeti vezu do slike sa koje izvor treće strane, ili samo naziv dokumenta, ako se slika nalazi u istoj fascikli sa ovom datotekom.

Za one koji žele da znaju bolje

Sa cssom možete rastegnuti pozadinska slika , napravite tako da se ne ponavlja, dodajte gif-animaciju i još mnogo toga.

Ne možete sve napisati u jednom članku. Da, i nisam sebi postavio takav zadatak. Ima puno suptilnosti, a ako vam je obećano da ćete o svemu biti rečeno u jednom članku, onda ovo nije ništa drugo do prevara.

Želite li naučiti kako pravilno pisati web stranice? Preporučujem vam da učite programske jezike. Mogu savjetovati kurs Andreja Bernatskog" HTML5 i CSS3 od Zero do Pro ". Zaista mi se sviđa ovaj autor. Nisam posebno pohađao ovaj kurs, prije nekoliko godina je već postojalo nešto slično, ali manje moderno.

Autor je veoma simpatičan i lako razumljiv. Vrhunac ovog kursa je da vi ne samo učite, već kreirate specifičnu stranicu zajedno sa nastavnikom. Kao rezultat toga, dobit ćete vizit kartu, blog, pa čak i online prodavnicu. Veoma cool. Prve tri lekcije teorije HTML5 iz ovog kursa možete pogledati ovdje i sada.

Uzgred, uz ovaj kurs dobijate 7 bonusa: osnove html-a i css-a Andreja Bernatskog, izgled za početnike, kreiranje landing stranice uveče i još mnogo toga. Prije nego se upustite u ozbiljan trening, osjetite besplatni kurs" Vježbanje HTML5 i CSS3 ».

Pa, to je u suštini sve. Pretplatite se na newsletter da saznate više. Vrlo brzo ću vam reći nešto više o tome adaptivni raspored, povećati zaradu od bilo kojeg bloga i ženskog seta korisni savjeti o olakšavanju rada. Do ponovnog susreta i sretno u vašim nastojanjima.