Izgled web stranica: kako napraviti pozadinsku sliku u htmlu

Mnogi početnici koji samo razumiju suštinu stvaranja web stranice često se pitaju kako u html napraviti pozadinu sliku. A ako neki ljudi razumiju taj problem, ipak postoje problemi dok istodobno istiskuju sliku do pune širine monitora. U ovom slučaju, želim da se web lokacija prikazuje na isti način na svim preglednicima, tako da treba ispuniti zahtjev za kompatibilnost unakrsnih preglednika. Pozadinu možete postaviti na dva načina: pomoću HTML oznake

Osnovne HTML oznake za stvaranje pozadine

Zato idemo na pitanje kako napraviti pozadinsku sliku u HTML-u na cijelom zaslonu. Kako izgledati lijepo mjesto, morate shvatiti jednu prilično važan detalj: to je dovoljno samo napraviti gradient pozadinu ili boja to jednobojnu, ali ako je potrebno umetnuti sliku pozadine, neće se protežu punu širinu zaslona. Slika je izvorno potrebno pokupiti ili napraviti svoj vlastiti dizajn sa ovim nastavkom, u kojem će se prikazati stranici web-mjesta. Tek nakon što je pozadinska slika spremna, prenesemo je u mapu pod nazivom "Slike". U njemu ćemo pohraniti sve korištene slike, animacije i druge grafičke datoteke. Ova bi mapa trebala biti u korijenskom direktoriju sa svim HTML datotekama. Sada možete ići na kôd. Postoji nekoliko mogućnosti za pisanje koda, s kojim se pozadina mijenja na sliku.

1. Napišite atribut oznake.
2. Putem CSS stila u HTML kodu.
3. Napišite CSS stil u zasebnu datoteku.

Kao u HTML-u, kako biste napravili pozadinu sliku, odlučili ste, ali želio bih reći nekoliko riječi o tome kako bi to bilo najoptimalnije. Prva metoda pisanjem atributa oznake već je zastarjela. Druga opcija se koristi u vrlo rijetkim slučajevima, samo zato što dobivate mnogo istog koda. A treća opcija je najčešća i djelotvorna. Evo HTML oznaka za primjer:

1. Prvi način pisanja kroz atribut tijela u datoteci index.htm. Ona je pohranjena u ovom obliku: (body pozadini = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ tijelo). To jest, ako imamo sliku s naslovom «slika» i proširenje JPG, a mi smo folder naziva «Slike», zatim unos HTML-kod će izgledati ovako: (tijelo background = „slike / slika.jpg”) hellip- (/ tijelo ).
2. Druga metoda pisanja utječe na stil CSS, ali je napisana u istoj datoteci naziva index.htm. (body style = "pozadina: url (`../ Images / Picture.jpg`)").
3. I treći način snimanja se obavlja u dvije datoteke. Dokument s naslovom Urantije oznaku (glave) je zabilježen je linija: (glava) (link rel = "stylesheet" type = "text / css" href = "Put_k CSS_faylu") (/ glava). A u stilu datoteke s nazivom style.css već pišemo: body {background: url (Images / Picture.jpg `)}.

Kao u HTML-u da napravimo pozadinsku sliku, rastavljamo. Sada morate razumjeti kako se protežu slike širine čitavog zaslona.

Načini da se pozadinska slika proteže na širinu prozora

Zamislimo da je naš zaslon u postotku. Ispada da će cijela širina i dužina zaslona biti 100% x 100%. Moramo se protezati na ovu širinu. Dodajte u unos slike u stilu style.css niz koji će protezati sliku do pune širine i dužine monitora. Kako je napisano u CSS stilu? Jednostavno!

tijelo

{

pozadina: url (Images / Picture.jpg `)

veličina pozadine: 100% - / * ovaj je unos pogodan za najsuvremenije preglednike * /

}

Ovdje smo i shvatili kako napraviti pozadinu slike u HTML-u na cijelom zaslonu. Postoji i način pisanja u datoteci index.htm. Iako je ova metoda zastarjela, nužno je da ga početnici znaju i razumiju. U pozadini (glavnom) (stilu) div {veličine pozadine: cover-} (/ stilu) (/ glava), to znači da odaberemo poseban blok za pozadinu koja će biti postavljena po čitavoj širini prozora. Pregledali smo dva načina kako napraviti HTML stranicu pozadinske slike, tako da je slika ispružena do pune širine zaslona u bilo kojem od modernih preglednika.

Kako napraviti fiksnu pozadinu

Ako odlučite upotrijebiti fotografiju kao pozadinu budućeg web resursa, trebate samo naučiti kako ga učvrstiti, tako da se ne proteže u dužini i ne plijenom estetskog izgleda. Dovoljno jednostavna uz pomoć HTML kôd propisati ovaj mali dodatak. U datoteci style.css morate dodati jednu rečenicu iza pozadine: url (Images / Picture.jpg `) fiksno ili dodati zasebnu liniju nakon toga, točka-zarez: položaj: fiksno. Na taj način, pozadinska slika će postati mirna. Dok se pomaknete sadržajem na web mjestu, vidjet ćete da se tekstne linije kreću, a pozadina ostaje na mjestu. Na taj način ste naučili kako napraviti pozadinsku sliku u HTML, na nekoliko načina.

Rad s tablicom u HTML-u

Mnogi neiskusni web programeri, kada se suočavaju s tablicama i blokovima, često ne razumiju kako napraviti sliku u html pozadini tablice. Kao i svi HTML naredbe i CSS stil, ovaj web programski jezik je vrlo jednostavan. A rješenje ovog problema bit će pisanje nekoliko redaka koda. Već ste trebali znati da je pisanje tablicu redaka i stupaca, odnosno, kao što je označeno oznakama (TR) i (TD). Da bi pozadinu stola u obliku slike, potrebno je dodati oznaku (stol), (tr) ili (TD) jednostavnu rečenicu s obzirom na referentnu sliku: pozadine = URL slike. Radi jasnoće dajemo nekoliko primjera.

Tablice sa slikom umjesto pozadine: HTML primjeri

Crtanje 2x3 stol i čine ga pozadinske slike pohranjene u mapu "Slike": (Tablica pozadini = "images / slika.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) (Td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tablica). Dakle, naš stol će biti obojan u pozadini slike.

Sada nacrtati iste veličine tanjur 2x3, no umetanje slike u stupcima brojevima 1, 4, 5 i 6. (tablica) (tr) (td pozadine = "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) (/ tablica). Nakon pregleda vidimo da se pozadina pojavljuje samo u onim ćelijama u kojima smo se registrirali, ali ne u cijelom tablici.

Web-lokacija s više web-preglednika

Još uvijek postoji takva stvar kao resurs za pregled web-preglednika web resursa. To znači da će stranice stranica biti prikazane na isti način u različitim vrstama i verzijama preglednika. Istodobno, trebate prilagoditi HTML kôd i CSS stil za potrebne preglednike. Osim toga, u suvremenoj dobi razvoja pametnih telefona mnogi web programeri pokušavaju stvoriti web stranice prilagođene za mobilne verzije i pogled na računalo.