Imam jednu malu sličicu na kojoj se boje prelijevaju iz jedne u drugu. Htjela bih je staviti u background stranice, ali ne tako da mi se ta sličica ponavlja (tako grozno izgleda), već da mi se rastegne od gornjeg lijevog do donjeg desnog kuta stranice.
Može li se to?
Možeš koristiti css 3 atribut background-size
body{
background-size: 100%;
}
[quote=“APazinjan”]Možeš koristiti css 3 atribut background-size
body{
background-size: 100%;
}[/quote]
Što znači CSS 3?
Da li to snimam kao običan CSS ili nekako drugačije?
Naime, probala sam ovo (onako kako inače radim sa CSS-om) i ne radi.
Onda sam to tvoje ubacila u Google, i on me odveo na ovo
body {
background: url(slika.jpg) no-repeat; background-size: 100%;
}
ali ni tako ne radi. Slika se pojavi samo jednom, i ispod nje imam još teksta, dakle nije razvučena.
Gdje griješim?
Može link na stranicu na kojoj isprobavaš.
Css 3 je novi poboljšani css ali je nažalost podržan samo u novijim preglednicima. To naravno snimaš normalno kao i css, u istu datoteku. Sve je isto samo su dodane neke nove ‘naredbe’ koje novi preglednici prepoznaju ali stari ne.
A, onda je štos vjerojatno u tome što nemam najnoviji FF, a niti IE…
Evo,
http://public.carnet.hr/~ahorvate/pozadina/
.
Tu je ona tvoja prva verzija (bez no-repeat).
Ali, ako to ne može raditi dobro u svim preglednicima (koji se još dosta koriste), onda to neću niti koristiti.
Jedino ako ima koje rješenje koje će dobro raditi i u ovima starijima…
Da, do tvog preglednika je, meni radi normalno. Potražim još malo pa ti javim kada nađem nešto, sigurno ima dobro rješenje. Samo da ti napomenem da ovo baš nije najzgodnije rješenje jer je slika dosta loše kvalitete kada se rastegne preko mog ekrana (1920*1080).
Ma ova slika je samo za probu.
Onu koju sam spominjala u prošlom postu (na kojoj se prelijevaju boje), napravila sam prije mjesec dana, a onda skužila da je ne mogu rastegnuti, pa je obrisala. No, ako nađemo rješenje za rastezanje, napravim ja ponovo onu koju trebam…
Thanks!
[quote=“ahorvatek”]Ma ova slika je samo za probu.
Onu koju sam spominjala u prošlom postu (na kojoj se prelijevaju boje), napravila sam prije mjesec dana, a onda skužila da je ne mogu rastegnuti, pa je obrisala. No, ako nađemo rješenje za rastezanje, napravim ja ponovo onu koju trebam…
Thanks![/quote]
Nisam strucnjak za Photoshop ali zar se sa njim nemoze nesto izmajmunisat da povecas sliku 
Ali, nisu mi sve stranice jednake veličine. Dakle, treba postići da se slika rastegne na različite veličine.
Pa dobro povećaj sliku na neku default mjeru samo da je veća od te da ti se slika ne kvari i onda je preko css-a mijenjaj veličine
Kako da joj preko CSS-a mijenjam veličinu, kad CSS djeluje na sve stranice, a stranice su različih visina (a da nije CSS3)?
-
za svaku stranicu kreiras drugi css file
-
možeš sve strpat u jedan css ali promjenis imena divova gdje se slika nalazi i to je to tako na primjer imas
u jednom html siteu
i imas drugu stranicu gdje imas
css bi bio ovakav
#slika1{
blabla
}
#slika2{
blabla4
}
ukoliko na jednoj stranici nemas jedan od divova css se i ne izvrsava nego samo nastavlja dalje
Tvoje riješenje je Javascript, naravno.
http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/
[quote=“CreatifCode”]Tvoje riješenje je Javascript, naravno.
http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/
[/quote]
Hvala na linkovima!
Vidim tu da se svašta može. Sad preostaje probavanje… 
[quote=“APazinjan”]Može link na stranicu na kojoj isprobavaš.
Css 3 je novi poboljšani css ali je nažalost podržan samo u novijim preglednicima. To naravno snimaš normalno kao i css, u istu datoteku. Sve je isto samo su dodane neke nove ‘naredbe’ koje novi preglednici prepoznaju ali stari ne.[/quote]Koliko ja znam backgroud width od 100% je standard već duže vrijeme u css, nije napravljen tek sa css3!!!
Čita ga čak i internet explorer 7, to je valjda dovoljno
[quote=“Optimizacija”]Koliko ja znam backgroud width od 100% je standard već duže vrijeme u css, nije napravljen tek sa css3!!!
Čita ga čak i internet explorer 7, to je valjda dovoljno :)[/quote]
Koji točno kod moram utipkati i gdje?
Probala sam to dodati u CSS ovako
body {background: url(kolibric.jpg) width: 100% }
pa ne radi, a probala sam i ispred width staviti ;
i još neke varijante, ali nijedna mi ne radi…
Ja tu sintaksu očito nikad neću savladati…
Znam da je pitanje glupo, ali ako to zbilja može raditi, unaprijed hvala ako mi netko točno napiše što ukucati.
Stavi ovo odmah iza početnog body taga:
Onda pišeš Css za taj div:
#pozadina {background:transparent; position:fixed; top:0px; left:0px; width:100%; height:100%;z-index:0;}
Ovdje ti je najbitnije ovo z-index:0, sada tvoj glavni kontejner u kojem češ prikazati stranicu mora imati z-index:1, pojednostavljeno to znači pošto ima veći broj da će ići ispred onog prethodnog.Kako pozadina ima 0, ona ostaje u pozadini, a kako želimo da sadržaj bude preko pozadine damo mu z-index 1.
Nek ti slika bude nekih 1600X900, smanji je na nekih 50% kvalitete, i trebalo bi se dobro rastegnuti i na najvećoj rezoluciji.
Naravno, možeš koristiti i Css3, ali dok se ne standarizira, ovo je ok rješenje.
E da, zaboravio sam napomenuti da moraš staviti i Css reset na vrh Css fajla, da ti poništi defaultne postavke browsera za margin i padding i još puno stvari.Uglavnom ako ti se ne da s tim zazati, obavezno stavi ovo da bi ti slika popunila cijeli browser.
body{margin:0;padding:0;}
Suludi, hvala, uspjela sam! :klanjamse
Baš fora izgleda ovo kad skrolam stranicu, a pozadina miruje…
http://public.carnet.hr/~ahorvate/pitanje/index2.htm
(slika je malo mutna, ali neće ostati ta)
Jedino me malo mučilo kako da tekstu pridružim z-index 1, nisam znala kamo da to stavim… (a kamo sam stavila, nije radilo…)
No, onda sam se snašla pa sam u ono #pozadina što si mi napisao, stavila z-index:-1 (umjesto 0), i onda je tekst postao vidljiv, bez da sam išta za njega morala namještati. (a negdje sam jednom vidjela da je netko stavio taj -1…)
Tak sam trapava…
(tu bi mi dobro došao smajlić sa škaniclom na glavi)
Još jednom puno hvala!
Joooj, zona sumraka - ne radi u IE !!!
Na svu sreću, pomoglo je ono što je jednom pomoglo kad mi opacity nije htio raditi u IE - dodala sam na početak liniju
[quote=""]
[/quote]
pa sad ipak radi i u IE,
http://public.carnet.hr/~ahorvate/pitanje/index3.htm
.
Ova natezanja s preglednicima je kao igra lovača u kamenom dobu…
Izrada stranica je očito posao za “kromanjonce”. Morat će se to standardizirati i još puno puno približiti korisniku, ovo je zbilja za svisnut od muke… (i nemojte mi reći da je CMS rješenje, ja bih i u njemu imala milijun problema i detalja koje ne mogu podesiti…)
Tekstu si samo trebala staviti visoćiji z-index, naprimjer 99, onda si sigurna da on ide preko svega.Ali ako ti je tekst u nekom kontejneru(tako se većinom rade stranice), da glavni sadržaj staviš u nekakv wrapper ili container, onda ti je bilo dovoljno da mu staviš z-index:1 i sve što se nalazi u tom wrapperu ide preko pozadine.
A taj -1 ti radi jer ti nešto već ima vrijednost 0, pa je sad sve ok.