Keskustelu: Nettisivujen teko: Bodyyn logo?

Moi!

Nyt tarvitaan taas hjelppiä... Olen tehnyt aina kotisivun maincontentin 900x700 px. Ja haluaisin taustalle logon, joka olisi aina sopivan kokoinen, riippuen siitä minkä kokoista näyttöä käytetään... Onko sellainen mahdollista, ja jos on niin minkälaisella koodilla? Hjelpatkaa, kiitos... =)

Mikähän on "aina sopivan kokoinen", eli eikö se voi olla "aina" vaikka sen 250x100 kokoinen?

Voithan tietenkin kokeilla asettaa leveyden esim. prosenteilla, mulklata kokoa javascriptillä, vaihdella css-tyyliä lennossa yms. yms. yms.

Tarkoitatko siis 250 x 100 px? Eiks se ole aikasta pieni?
Ja kuinka järkevää on alkaa pelailemaan noilla prosenteilla, meneeköhän kikkailuksi... =0

Kommentointia =)

jhh kirjoitti:

Tarkoitatko siis 250 x 100 px? Eiks se ole aikasta pieni?

http://www.makemylogobiggercream.com/

edit:
Puhutko sä oikeasti nyt "logosta" vai jostain muusta, esim. sivuston header-osiosta?

jhh kirjoitti:

Olen tehnyt aina kotisivun maincontentin 900x700 px.

Olisi jo aika tehdä edes vähän nykyaikaisemmin. Tuollainen toimii aika heikosti esimerkiksi Androidissa. ”Responsiivinen suunnittelu” on päivän sana.

lainaus:

Ja haluaisin taustalle logon, joka olisi aina sopivan kokoinen, riippuen siitä minkä kokoista näyttöä käytetään...

Taustalle logon? Mitähän varsinaisesti tarkoitat? ”Logo” tarkoittaa varsinaisesti yrityksen tms. nimen tai lyhenteen erityistä typografista asua, käytännössä usein myös sellaisen ja tunnuskuvan yhdistelmää taikka pelkkää tunnuskuvaa. Sellaisia ei yleensä käytetä taustakuvina, vaan sisältökuvina.

Mutta jos ajatellaan yleisesti taustakuvaa puuttumatta siihen, mitä kuvassa on, niin kyllähän selainikkunan kokoon mukautuva taustakuva on ihan mahdollinen. Vanha vähän kikkaileva tapa on sellainen, että käytetään sisältökuvaa (img-elementtiä), jolle asetetaan CSS:llä esimerkiksi width: 100% ja joka asemoidaan absoluuttisesti niin, että se jää kaiken sisällön alle. Modernimpi tapa, joka alkaa jo melko hyvin toimia selaimissa, on seuraavantapainen:

body { background: url(maisema.jpg); background-size: 100%; }

Tuo skaalaa kuvan selainikkunan levyiseksi, kuvan suhteet säilyttäen. Jos selainikkunan korkeuden ja leveyden suhde on suurempi kuin kuvassa, niin kuva oletusarvoisesti toistuu pystysuunnassa. Periaatteessa CSS-mediakyselyillä voi selvittää näyttöalueen suhteet (aspect ration) ja sen mukaan käyttää erilaisia kuvia eri tapauksissa.

Joka tapauksessa isoin ongelma on, miten hoidellaan suhteiltaan erilaisia ikkunoita. Kuvan voi toki sovittaa myös koko ikkunaan, mutta silloin tietysti kuva yleensä vääristyy, ehkä pahastikin.

background-size: contain;

http://www.w3schools.com/cssref/css3_pr_background-size.asp

edit: lisätty linkki

reca kirjoitti:

background-size: contain;

Kuten kirjoitin noin viikko sitten, ”isoin ongelma on, miten hoidellaan suhteiltaan erilaisia ikkunoita”. En suosittelisi mitään menetelmää tietämättä, millaisesta kuvasta on kyse ja mm. halutaanko tai sallitaanko kuvan toistuvan.

lainaus:

www.w3schools.com

http://w3fools.com