Pozadina sa fotografije u html-u. pozadinska slika

Mnogi početnici dizajneri izgleda, koji tek prodiru u suštinu kreiranja web stranica, često se pitaju kako napraviti pozadinsku sliku u html-u. A ako neki ljudi mogu shvatiti ovaj zadatak, onda i dalje postoje problemi pri rastezanju slike na punu širinu monitora. U isto vrijeme, želio bih da se stranica prikazuje na isti način na svim pretraživačima, tako da se mora ispuniti zahtjev kompatibilnosti među pretraživačima. Pozadinu možete postaviti na dva načina: korištenjem i CSS stilom. Svako bira najbolju opciju za sebe. Naravno, CSS stil je mnogo praktičniji, jer je njegov kod pohranjen u zasebnoj datoteci i ne zauzima dodatne stupce u glavnim oznakama web-mjesta, ali prvo pogledajmo jednostavnu metodu postavljanja slike na pozadinu stranice.

Osnovne HTML oznake za kreiranje pozadine

Dakle, pređimo na problem, pozadina u html-u je cijeli ekran. Da bi stranica izgledala lijepo, morate razumjeti jedan prilično važan detalj: dovoljno je samo napraviti gradijent pozadinu ili je obojiti jednobojnom bojom, ali ako trebate umetnuti sliku u pozadinu, to neće rastegnuti na cijelu širinu monitora. U početku morate odabrati sliku ili sami napraviti dizajn s takvim proširenjem u kojem ćete prikazati stranicu stranice. Tek nakon što je pozadinska slika spremna, prenosimo je u mapu pod nazivom "Slike". U njemu ćemo pohraniti sve korištene slike, animacije i druge grafičke datoteke. Ovaj folder bi trebao biti u korijenskom direktoriju sa svim vašim html datotekama. Sada možemo prijeći na kod. Postoji nekoliko opcija za pisanje koda koji će promijeniti pozadinu u sliku.

1. Napišite oznaku atributa.
2. Kroz CSS stil u HTML kodu.
3. Napišite CSS stil u posebnu datoteku.

Na vama je kako napraviti pozadinu kao sliku u HTML-u, ali bih želio reći nekoliko riječi o tome kako bi to bilo najoptimalnije. Prvi metod, pisanjem kroz atribut oznake, odavno je zastario. Druga opcija se koristi u vrlo rijetkim slučajevima, samo zato što ima puno istog koda. A treća opcija je najčešća i najefikasnija. Evo primjera HTML oznaka:

1. Prvi način za pisanje je preko atributa oznake (tijelo) u datoteci index.htm. Piše se ovako: (pozadina tijela= "ime_fascikle/ime_slike.extension")(/tijelo). Odnosno, ako imamo sliku sa nazivom "Slika" i ekstenzijom JPG, a imenik smo nazvali kao "Slike", onda će unos HTML koda izgledati ovako: (body background="Images/Picture.jpg" )… (/tijelo) .
2. Druga metoda pisanja utiče na CSS stil, ali je napisana u istoj datoteci koja se zove index.htm. (body style="background: url("../Images/Picture.jpg")").
3. I treći način snimanja je napravljen u dva fajla. U dokumentu koji se zove index.htm, sljedeći red je napisan u: (head)(link rel="stylesheet" type="text/css" href="Path_to CSS_file")(/head). A u datoteci stila pod nazivom style.css već pišemo: tijelo (pozadina: url (Slike/Slika.jpg")).

Kako napraviti pozadinu sliku u HTML-u, mi smo demontirali. Sada morate da shvatite kako da rastegnete sliku preko celog ekrana.

Načini rastezanja pozadinske slike na širinu prozora

Predstavimo naš ekran kao procenat. Ispostavilo se da će cijela širina i dužina ekrana biti 100% x 100%. Moramo da rastegnemo sliku na ovu širinu. Dodajmo liniju unosu slike u datoteci style.css, koja će sliku rastegnuti na punu širinu i dužinu monitora. Kako je ovo napisano u CSS stilu? Sve je jednostavno!

pozadina: url(Slike/Slika.jpg")

veličina pozadine: 100% /* ovaj unos će raditi za većinu modernih pretraživača */

Tako smo shvatili kako sliku napraviti pozadinom u html-u na cijelom ekranu. Postoji još jedan način za pisanje u index.htm datoteku. Iako je ova metoda zastarjela, neophodno je da je početnici znaju i razumiju. U (head)(style) div ( background-size: cover; ) (/style) (/head) tag, ovaj unos znači da biramo poseban blok za pozadinu, koji će biti pozicioniran po cijeloj širini prozor. Razmotrili smo 2 načina da pozadinu stranice učinimo html slikom tako da se slika proteže cijelom širinom ekrana u bilo kojem od modernih pretraživača.

Kako napraviti fiksnu pozadinu

Ako odlučite koristiti sliku kao pozadinu budućeg web resursa, onda samo trebate saznati kako je učiniti nepomičnom kako se ne bi protezala po dužini i pokvarila estetski izgled. Dovoljno je samo uz pomoć propisati ovaj mali dodatak. Morate dodati jednu frazu u datoteku style.css nakon što je pozadina: url(Slike/Slika.jpg") fiksna; ili umjesto toga dodati poseban red nakon tačke zarez - position: fixed. Tako će vaša pozadinska slika postati fiksna. skrolujući kroz sadržaj na sajtu, videćete da se linije teksta pomeraju, ali pozadina ostaje na svom mestu. Tako ste naučili kako da pozadinu napravite sliku u html-u, na nekoliko načina.

Rad sa tabelom u HTML-u

Mnogi neiskusni web programeri, kada se suoče sa tabelama i blokovima, često ne razumiju kako napraviti sliku pozadinom tablice u html-u. Kao i sve i CSS stil, i ovaj web programski jezik je prilično jednostavan. A rješenje za ovaj problem će biti pisanje nekoliko linija koda. Već treba da znate da je pisanje redova i kolona tabele označeno oznakama (tr) i (td), respektivno. Da bi pozadina tabele izgledala kao slika, dodajte jednostavnu frazu oznaci (tabela), (tr) ili (td) sa vezom do slike: pozadina = URL slike. Radi jasnoće dajemo nekoliko primjera.

Tabele sa slikom umjesto pozadine: HTML primjeri

Nacrtajmo tabelu 2x3 i napravimo je pozadinom slike sačuvane u folderu “Slike”: (pozadina tabele = “Slike/Slika.jpg”) (tr) (td)1(/td) (td)2(/ td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table) . Tako će naš sto biti oslikan u pozadini slike.

Sada nacrtajmo istu tabelu dimenzija 2x3, ali sliku ubacimo u kolone pod brojem 1, 4, 5 i 6. (tabela)(tr)(td background = “Slike/Slika.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td pozadina = “Slike/Slika.jpg”)4(/td) (td pozadina = “Slike/Slika.jpg”) 5( /td) (td background = “Slike/Slika.jpg”)6(/td) (/tr) (/table). Nakon pregleda vidimo da se pozadina pojavljuje samo u onim ćelijama u kojima smo registrovani, a ne u cijeloj tabeli.

Stranica sa više pretraživača

Postoji i takva stvar kao što je web resurs za više pregledača. To znači da će stranice stranice biti jednako ispravno prikazane u različitim tipovima i verzijama pretraživača. U tom slučaju morate prilagoditi HTML kod i CSS stil za potrebne pretraživače. Osim toga, u modernoj eri razvoja pametnih telefona, mnogi web programeri pokušavaju kreirati stranice koje su prilagođene i mobilnoj verziji i pregledu na računaru.

Za kreiranje stranice važno je pitanje kako napraviti pozadinu u html-u. Ovaj postupak uključuje korištenje određenih oznaka - kodnih riječi i slova. Zahvaljujući njima, možete staviti drugačiju pozadinu, učiniti je monofonijom - ispuniti je ili staviti 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, potrebno je da otvorite kod html stranice u uređivaču teksta. 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. Umjesto tri tačke potrebno je napisati - tijelo (pozadina:) . Ovo je postavka koja vam omogućava da postavite različite stilove 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.

Umjesto obične pozadine možete staviti sliku. 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!

Vlad Merzhevich

Zbog specifičnosti web stranica, pozadinske slike zauzimaju značajnu ulogu u rasporedu dokumenata web stranice. Istovremeno, oni su aktivno uključeni u razne aktivnosti, na primjer, automatiziranje procesa pričvršćivanja slika na tekst, kreiranje prijelaza gradijenta i, naravno, dodavanje pozadine ispod sadržaja. Slijede neki aspekti korištenja pozadinskih slika.

Pozadina na web stranici

Postavljanje pozadinske slike na web stranici se tradicionalno vrši preko pozadinskog atributa oznake . Takav obrazac se ponavlja horizontalno i okomito, ispunjavajući na taj način cijeli prozor pretraživača. Jasno je da ovde nema posebnih opcija za kreativnost, pa hajde da se okrenemo stilovima i vidimo šta možemo da uradimo sa CSS-om.

U CSS-u postoji pet atributa koji kontrolišu pozadinsku sliku: njeno umetanje, položaj i ponavljanje. Međutim, svi ovi parametri su zamijenjeni jednim univerzalnim svojstvom background i koristit ćemo ga u budućnosti.

Dodavanje pozadinske slike

Dodavanje slike se vrši postavljanjem adrese slike preko ključne riječi url. Argumenti bez ponavljanja (bez ponavljanja), repeat-x (horizontalno ponavljanje) i repeat-y (vertikalno ponavljanje) se koriste za kontrolu načina na koji se slika ponavlja. Ovo rezultira web stranicom prikazanom na sl. jedan.

Da biste postavili sliku na web stranicu, dodajte svojstvo stila pozadine selektoru BODY, kao što je prikazano u primjeru 1.

Primjer 1. Pozadinska slika

U ovom primjeru, grafički target.gif je definiran kao pozadina web stranice bez ponavljanja slike. Kako bi se spriječilo da slika bude pripijena uz ivice pretraživača, pomjerena je 30 piksela udesno i 20 piksela dolje od prvobitne pozicije.

ponavljanje šablona

Uz mogućnost postavljanja pozadinske slike da se ponavlja horizontalno ili okomito, dostupno je nekoliko opcija dizajna web stranice. Na primjer, da biste napravili vertikalnu traku duž lijeve ivice (slika 2), potrebna vam je slika prikazana na sl. 3.

Crtež treba da bude takav da se spaja okomito bez vidljivih šavova, te da čini jedinstvenu cjelinu sa zadatom bojom pozadine web stranice. Primjer 2 pokazuje kako se kreira takva pozadinska slika, opet koristeći svojstvo pozadine i njegovu vrijednost repeat-y.

Primjer 2: Ponovite pozadinu okomito

Slično, možete ponoviti pozadinu horizontalno, na primjer, kreiranjem gradijenta i postavljanjem kao pozadinsku sliku (slika 4).

Da biste dobili web stranicu prikazanu na sl. 4, prvo ćete morati napraviti sliku s prijelazom gradijenta. Širina je dovoljna za navođenje 20-40 piksela, a visina slike zavisi od namjene dokumenta i predviđene visine sadržaja web stranice. Također, ne zaboravite da će veliki crtež dovesti do povećanja veličine grafičke datoteke. A to će negativno utjecati na brzinu njegovog učitavanja i na kraju će usporiti prikaz pozadine. Za ovaj slučaj je sasvim prikladna slika veličine 30x200 piksela (slika 5).

Primjer 3 prikazuje HTML kod za kreiranje gradijenta pozadine.

Primjer 3: Horizontalno ponavljanje pozadine

Slika gradijenta dobro funkcionira s blokom pune boje, tako da ovaj primjer dodaje sloj za prikaz sadržaja web stranice.

Dodavanje slike u tekst

Pomoću pozadinske slike možete automatizirati proces dodavanja slika određenom tekstu, kao što su naslovi. Da biste to učinili, koristite pozadinsko univerzalno svojstvo, koje se primjenjuje na željeni selektor. Kao vrijednost navedite putanju do slike i, kako se ne bi ponavljala, argument zabrane ponavljanja (primjer 4).

Primjer 4: Dodavanje slike

header

Glavni tekst

Kao što je prikazano u ovom primjeru, slika se može pomicati vodoravno i okomito od prvobitne pozicije, po defaultu je to gornji lijevi kut elementa bloka. Pomeranje pozadine vam omogućava da postavite sliku u odnosu na tekst na željeni način. Da biste spriječili da se tekst preklapa sa slikom, obavezno dodajte svojstvo padding-left, zbog čega se tekst pomiče udesno za određenu udaljenost. On je u svakom slučaju individualan i obično je jednak širini slike plus željeni razmak između slike i teksta.

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ću ideju i gotove primjere, već 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 da koristite sledeće i želite da dobijete važeći (tačan) kod, morate se zaustaviti na prelaznom tipu 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 cijeli raspoloživi prostor stranice ili njenog elementa. 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 nije moguće postaviti boju i/ili sliku pozadine koristeći HTML 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:

U ovom slučaju 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 - kliknite na željenu boju i dobijete njen kod.

Atribut pozadine za kreiranje pozadinske slike

Kao iu slučaju boje pozadine, iu slučaju pozadinska slika, Morate koristiti poseban atribut, odnosno pozadinu, 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, gdje se ovaj trenutak uzima 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 je koristiti apsolutni put do slike, 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 postavljanje boje pozadine u HTML-u, koristi posebne kodove koje možete pronaći u grafičkom uređivaču 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 vam na pažnji. Sretno!

Ako trebate urediti dokument u Microsoft Wordu ne samo ispravno, već i lijepo, onda je bolje koristiti neku vrstu slike u pozadini. Može ga uzeti bilo tko, ali je bolje da odgovara odštampanom tekstu. Takođe može biti logo ili naziv kompanije. Ako ih stavite iza teksta, onda izgledaju ljepše od vodenog žiga ili pozadine i privlače više pažnje.

U članku ćemo razmotriti ovu temu i naučiti kako napraviti sliku pozadinom u MS Wordu.

Dodajte sliku kroz odgovarajuću stavku menija

Možete odabrati sliku za stranicu u programu Word 2007, 2010 i 2013 na sljedeći način. Otvorite željeni dokument i idite na karticu "Izgled stranice". Zatim kliknite na dugme "Boja stranice" i izaberite iz menija.

Ako imate instaliran Word 2016, onda u otvorenom dokumentu idite na karticu "Dizajn", a zatim uradite sve kako je gore opisano: "Boja stranice" - "Metode popunjavanja".

Otvoriće se mali dijaloški okvir. U njemu idite na karticu "Slika" i kliknite na istoimeno dugme koje se nalazi ispod praznog područja u sredini.

U programu Word 2016, ovo će se pojaviti ispred prozora prikazanog na slici iznad. U njemu možete izabrati odakle želite da ubacite sliku, to može biti slika sa računara ili preko pretrage pronaći onu koja vam je potrebna.

Nakon odabira slike, kliknite na "OK" u odgovarajućem prozoru.

Prednost ove metode je da se pozadina koju odaberete primjenjuje na sve stranice u dokumentu.

Loša strana je što slika mora biti odgovarajuće veličine. Kao što možete vidjeti, u primjeru je vidljiv samo jedan pingvin. U skladu s tim, ovu sliku moram sačuvati u drugoj veličini kroz neki uređivač, na primjer, Paint.

Pravljenje slike pozadinom stranice

Pogledajmo još jedan način na koji možete napraviti željenu pozadinu.

Otvorite dokument i idite na karticu. Zatim kliknite na dugme Slika da biste je dodali na stranicu.

U sljedećem prozoru pronađite ono što odgovara vašem računalu, odaberite i kliknite na "Zalijepi".

Nakon dodavanja slike, kliknite desnim tasterom miša na nju i izaberite iz kontekstnog menija "Premotavanje teksta" - "Iza teksta".

Sada će sav tekst koji se nalazi u dokumentu biti prikazan ispred slike. Da biste odabranu sliku učinili pozadinom cijelog lista i uklonili bijele margine, morate je rastegnuti. Da biste to učinili, kliknite na sliku. Markeri će se odmah pojaviti duž ivica - tačke na uglovima i po jedna tačka sa svake strane. Koristeći ove markere, razvucite okvir po širini i visini tako da pokrijete cijeli list.

Ovako mi se to desilo. Prednost metode je u tome što možete samostalno odabrati koji će dio slike biti prikazan na listu: u cijelosti, ili ga možete rastegnuti i napraviti tako da se prikazuje samo određeno područje.

Ali ako trebate koristiti jednu sliku, a u dokumentu ima puno stranica, onda je bolje odabrati veličinu koja joj odgovara i napraviti pozadinu, kao što je opisano u prvom paragrafu.

Vaši dokumenti će izgledati zanimljivije nakon što stavite odgovarajuću sliku kao pozadinu stranica. Samo zapamtite da tekst ne bi trebao biti izgubljen na odabranoj pozadini i trebao bi odgovarati tekstu.