Ako si izrada web stranice, možda će vas zanimati kako naučiti kako stvoriti fiksnu pozadinsku sliku ili vodeni žig na web stranici. Ovo je uobičajeni tretman dizajna koji je popularan na mreži već duže vrijeme. Praktičan je efekt imati u triku trikova za web dizajn.
Ako to prije niste radili ili ste ranije pokušali bez sreće, postupak se može činiti zastrašujućim, ali zapravo uopće nije jako težak. Ovim kratkim vodičem dobit ćete informacije potrebne za učenje tehnike za nekoliko minuta koristeći CSS.
Početak rada
Pozadinske slike ili vodeni žigovi (koji su zapravo samo vrlo lagane pozadinske slike) imaju povijest u tiskanom dizajnu. Dokumenti već dugo sadrže vodene žigove kako bi spriječili njihovo kopiranje. Uz to, mnogi letaci i brošure koriste velike pozadinske slike kao dio dizajna tiskanog djela. Web dizajn odavno posuđuje stilove iz ispisa, a pozadinske slike jedan su od tih posuđenih stilova.
Ove velike pozadinske slike lako je stvoriti pomoću sljedeće tri CSS stil Svojstva:
- pozadinska slika
- pozadina-ponavljanje
- pozadina-prilog
- veličina pozadine
Pozadinska slika
Pomoću pozadinske slike definirat ćete sliku koja će se koristiti kao vodeni žig. Ovaj stil jednostavno koristi put datoteke za učitavanje slike koju imate na svojoj web lokaciji, vjerojatno u imenovanom direktoriju slike.
pozadinska slika: url (/images/page-background.jpg);
Važno je da je sama slika svjetlija ili prozirnija od uobičajene slike. To će stvoriti taj "vodeni žig"izgled u kojem se poluprozirna slika nalazi iza teksta, grafike i ostalih glavnih elemenata web stranice. Bez ovog koraka, pozadinska slika nadmetat će se s informacijama na vašoj stranici i otežat će čitanje.
Pozadinsku sliku možete prilagoditi u bilo kojem programu za uređivanje, na primjer Adobe Photoshop.
Ponavljanje pozadine
Sljedeće je svojstvo background-repeat. Ako želite da vaša slika bude velika grafika u stilu vodenog žiga, koristili biste ovo svojstvo da bi se slika prikazala samo jednom.
pozadina-ponavljanje: bez ponavljanja;
Bez toga bez ponavljanja svojstvo, zadano je da se slika ponavlja i ponavlja na stranici. To je nepoželjno u većini modernih dizajna web stranica, pa bi se ovaj stil trebao smatrati ključnim u vašem CSS-u.
Pozadina-Prilog
Pozadinska privitak svojstvo je na koje mnogi web dizajneri zaboravljaju. Korištenjem održava pozadinsku sliku na mjestu dok upotrebljavate fiksne imovine. To je ono što tu sliku pretvara u vodeni žig koji je fiksiran na stranici.
Zadana vrijednost za ovo svojstvo je svitak. Ako ne navedete vrijednost privitka u pozadini, pozadina će se pomicati zajedno s ostatkom stranice.
pozadina-privitak: fiksno;
Veličina pozadine
Veličina pozadine je novije CSS svojstvo. Omogućuje vam podešavanje veličine pozadine na temelju prozora u kojem se pregledava. Ovo je vrlo korisno za responzivne web stranice koji će se prikazivati u različitim veličinama na različitim uređajima.
veličina pozadine: naslovnica;
Dvije korisne vrijednosti koje možete koristiti za ovo svojstvo uključuju:
- Pokriti - Skalira pozadinu tako da se prikaže ili puna širina ili puna visina. To znači da se neki dijelovi slike možda neće pojaviti na ekranu, ali da će cijelo područje biti pokriveno.
- Sadrže - Skalira sliku tako da se na području koje se stilizira prikazuju i cijela širina i visina. Slika nije odrezana, ali loša je strana što dijelovi područja možda nisu pokriveni slikom.
Dodavanje CSS-a na vašu stranicu
Nakon što shvatite gornja svojstva i njihove vrijednosti, možete dodati ove stilove na svoje web mjesto.
Dodajte sljedeće u GLAVA vaše web stranice ako izrađujete web stranicu s jednom stranicom. Dodajte ga CSS stilovima vanjskog lista stilova ako izrađujete web stranicu s više stranica i želite iskoristiti snagu vanjskog lista.
Promijenite URL pozadinske slike kako bi odgovarao određenom nazivu datoteke i putu datoteke koji je relevantan za vašu web lokaciju. Napravite sve druge odgovarajuće izmjene koje odgovaraju vašem dizajnu i imat ćete vodeni žig.
Možete odrediti i položaj
Ako želite postaviti vodeni žig na određeno mjesto na svojoj web stranici, možete i to učiniti. Na primjer, možda ćete htjeti vodeni žig u sredini stranice ili možda u donjem kutu, za razliku od gornjeg kuta, koji je zadani.
Da biste to učinili, dodajte svojstvo background-position u svoj stil. Ovo će postaviti sliku na točno mjesto na kojem biste željeli da se pojavi. Možete koristiti vrijednosti piksela, postotke ili poravnanja da biste postigli taj efekt pozicioniranja.
položaj pozadine: sredina;