2 pozadine u cssu?

Do sada se nisam s time sustretao pa me zanima kako rješiti sljedeći problem.
Trebaju mi 2 bg-image za jedan sajt. Jedan ide na vrh a drugi bi trebao biti na 500px od vrha.

Prvo pitanje je kako to riješiti sa dvije odvojene slike u cssu?
Drugo pitanje je, ako se odlučim na jednu ogormnu sliku koju dužinu ta slika mora imati da bi obuhatila sve rezolucije i kako odrediti gdje na slici nacrtati središe da to središte slike bude u svim rezulucijama sredina?

Valjda sam dobro objasnio situaciju :slight_smile:

Ako ćeš imat dvije slike npr jedna pozadina a jedna header, možeš u div za header stavit jednu pozadinu, a drugu stavit u div ispod njega i pomaknut ju gore sa negativnom marginom za veličinu te slike za header.

Ako ćeš imat jednu veliku trebala bi biti barem 1900px široka i staviš joj 50% 50% za bude u sredini uvijek.

[attachment=1]SLIKA.jpg[/attachment]

Evo slike da pojasnim situaciju.

[quote=“maydayy”]

Ako ćeš imat jednu veliku trebala bi biti barem 1900px široka i staviš joj 50% 50% za bude u sredini uvijek.[/quote]

E to, daj molim te napiši mi kod koji treba dodati da slika bude u sredini. Jel može to u body da ne stavljam nikakv div?

body {
background-image:url(images/bg.jpg);

}

Evo da ti bude uvijek u sredini:

body
{
background-image:url(‘smiley.gif’);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

[quote=“dombo”]Evo da ti bude uvijek u sredini:

body
{
background-image:url(‘smiley.gif’);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}[/quote]

Ok, thx, mislim da će to biti to

ili skraćeno background:url(smiley.gif) 50% 50% fixed no-repeat;

najjednostavnije stavis 2 “div”-a ii u svaki stavis background-image koju trebas i odredis im width i height.

Kako da preko toga ide tablica ili treći div?

stavis mu relativnu poziciju, a ostalim divovima koji idu prek njega stavis absolutnu poziciju

Jebote koji mudrijaši, najobičnija stranica header-content-footer, a vi tu mudrijate nemam pojma šta.

imaš jednostavnu strukturu:
[HTML]
<!doctype html>

[/HTML] i najobičniji css koji može postojati [HTML] header { background: transparent url(tvoja-slika.jpg) 0 0 no-repeat; } .content { margin-top: -30px; } footer { background: transparent url(tvoja-slika2.jpg) 0 0 no-repeat; } [/HTML] i to je to.

Kakva mudrijanja i pozicioniranja absolutna, relativna, fiksna. Osnovni layout ti je to moj Šime, osnovni.

kaj se sad ti pravis pametan, " jebote koji mudrijasi" , smiri malo tenzije jer nisi najpametniji., jesam mu rekao indenticnu stvar kao i ti… stavis dva div-a i na svaki background-image koju treba. a ja sam mu govorio za poziciju, kada idi div preko diva, a u tvojoj strukturi on neide…

Pa kad mudrijate, a ja ti se inače volim praviti jako pametan, kako to do sada nisi vidio?

Rješio sam to na najjednostavniji način, napravio sliku 1900x800 stavio ju za pozadinu i centrirao.
Mali problem je što sad moram koristiti .png slike jer moraju biti transparetne radi pozadine. Logo i 2-3 icone i eto 300-400kb. (ova velika pozadina ima samo 80kb).

Valjda 500tinjak kb danas nije problem za učitati.

bitno da si rijesio problem :wink:

Ne bih se štel mešati, ali danas je to puno pogotovo kada je sve više i više tableta i smartphoneova u upotrbi, a mobilni internet uopće nije jeftin. Ovaj način koji si ti koristio je najgori mogući, ali ako si ti zadovoljan onda ok.

Plust toga moraš znati da ti je i brzina učitavanja jedan od bitnih aspekata prilikom rangiranja u tražilicama.

[quote=“CreatifCode”]Ne bih se štel mešati, ali danas je to puno pogotovo kada je sve više i više tableta i smartphoneova u upotrbi, a mobilni internet uopće nije jeftin. Ovaj način koji si ti koristio je najgori mogući, ali ako si ti zadovoljan onda ok.

Plust toga moraš znati da ti je i brzina učitavanja jedan od bitnih aspekata prilikom rangiranja u tražilicama.[/quote]

Za mobilne uređaje se ne zabrinjavam jer se radi o flash igricama.
Kako da drugačije dodam transparentne slike (logo, rubove, sjene) a da budu manji od .png filova?

Pa doba web dizajna pretežito slikama je polako iza nas, iskoristi malo CSS 3 a slike koristi tamo di baš moraš.

[quote=“CreatifCode”]Jebote koji mudrijaši, najobičnija stranica header-content-footer, a vi tu mudrijate nemam pojma šta.

imaš jednostavnu strukturu:
[HTML]
<!doctype html>

[/HTML] i najobičniji css koji može postojati [HTML] header { background: transparent url(tvoja-slika.jpg) 0 0 no-repeat; } .content { margin-top: -30px; } footer { background: transparent url(tvoja-slika2.jpg) 0 0 no-repeat; } [/HTML] i to je to.

Kakva mudrijanja i pozicioniranja absolutna, relativna, fiksna. Osnovni layout ti je to moj Šime, osnovni.[/quote]

Da, ali pogrešno bi bilo pisati header i footer samo zbog pozadine.
Ako header nije header - onda ga ne treba niti spominjati.
Njemu treba pozadina kao pozadina, a ne kao element.


Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Webmaster.Ninja