vaikkapa valkoisesta harmaan kautta mustaksi. Ja tämän pitäisi toimia niin, että toimii erikorkuisilla sivuilla. Miten?
Jos teen tuon taustakuvana niin gif-fissä ei ole sulava sävyjen vaihtuminen ja jpg vie paljon tilaa ja posahtaa esille "joskus." Ja kuvia täytyy olla joka sivulle eri koska eri sivuja joutuu skrollaamaan eri määriä.
Joku koodin pätkä jossa olisi alku-ja loppuväri ja korkeutena sivun korkeuden mukaan skaalautuva, aina. Saisinko sellaisen jos on varastossa?
taustaksi
liukuväri
6
1646
Vastaukset
- Höpö.
Taustakuvaa ei kyllä saa skaalattua html:llä eikä css:llä. Mutta onko mustavalkoinen jpg nyt välttämättä kamalan iso. Testasin tekemällä Fotarilla 2000 pikseliä korkean ja 1 pikselin levyisen kuvan. Tallensin sen jpg:nä laatutasolla 60 (High) ja sen kooksi tuli 613byteä. Mielestäni ei kamalan paljoa, ja kuvan leveydenhän ei tosiaan tarvitse olla enempää kuin tuon 1 pikseli, koska kuvaa monistetaan leveyssyynnassa (repeat-x).
Css:llä pistät tuon sitten näin:
body {
background-image: url(liukuvari.jpg);
background-repeat: repeat-x;
background-color: Black;
}
Tai lyhyemmin näin:
body {
background: url(liukuvari.jpg) repeat-x Black;
}
Tai jos haluat laittaa suoraan html-koodiin niin näin:
Jos scrollatessa kuva loppuu, niin näytetään taustaväriä, joka kannattaa laittaa saman väriseksi kuin kuvan viimeinen pikseli - näintälläin:
Eli jos tarkoitus on tehdä pystysuunnassa oleva väriliuku, teet kuvan kooksi esim 800 x 1 pikseliä ja sitten määrittelet sen CSS-tyylillä "repeat-x":ksi, jolloin selain itse toistaa kuvaa vaakasuunnassa koko ikkunan leveydeltä. Kun kuvan leveys on vain yhden pisteen, tiedoston koko jää varsin pieneksi. PNG-kuvathan toimii myös hyvin tälläisissä taustoissa. (paitsi IE 6:lla ja sitä vanhemmilla.)
Korkeus onkin sitten ongelma, johon ei ole mitään ihan helppoa ratkaisua. Joku monimutkainen skripti voisi toimia, mutta käytännössä helpointa on tehdä väriliukukuvasta 1024 pistettä korkea, joten silloin se riittää suurimmalla osalla käyttäjistä peittämään koko ruudun.- ajattelinkin
tuossa taisi olla kirotushärö aiemmin kun kirjoitettiin 1024 korkeasta, pitäisi kai olla leveys siinä kohtaa.
Kyllä liukuväri vaatii enempi kb:tä kuin jos olisi vaikka musta pelkästään. Mutta kyllä se nopsasti ilmestyy ja ongelma on ollutkin vain tuo, että pari sivua täydentyy alaspäin viikottain kun sinne tulee uutta infoa. Eli sivun korkeus kasvaa ja taustakuva alkaa toistumaan uudelleen. Taustakuva päättyy alhaalla liukuvärinä vaaleaan ja sitten alkaakin uudelleen mustasta jyrkästi. Se ei näytä hyvältä.
Mitä pitäisi koodissa olla jotta taustakuva ei toistaisi itseään?
Nimittäin, jos koko sivun taustavärinä olisikin vaalea niin eihän se haittaa vaikka taustakuva päättyy alhaalla juuri samaan vaaleaan kuin mitä sivun pohjavärikin on. Ei ainakaan niin paljoa haittaa.
Kiitoksia avusta. Helppoa keinoa tuohon ei siis ole. Jos vaan saisin vielä lukea miten tuo taustakuva toistuisi vain kerran vasemmalta oikealle mutta ei alkaisi uudelleen, niin kokeilen pähkäillä sitten mikä ratkaisu toimisi tuon liukuvärin suhteen parhaiten. ? - taasnäin:
ajattelinkin kirjoitti:
tuossa taisi olla kirotushärö aiemmin kun kirjoitettiin 1024 korkeasta, pitäisi kai olla leveys siinä kohtaa.
Kyllä liukuväri vaatii enempi kb:tä kuin jos olisi vaikka musta pelkästään. Mutta kyllä se nopsasti ilmestyy ja ongelma on ollutkin vain tuo, että pari sivua täydentyy alaspäin viikottain kun sinne tulee uutta infoa. Eli sivun korkeus kasvaa ja taustakuva alkaa toistumaan uudelleen. Taustakuva päättyy alhaalla liukuvärinä vaaleaan ja sitten alkaakin uudelleen mustasta jyrkästi. Se ei näytä hyvältä.
Mitä pitäisi koodissa olla jotta taustakuva ei toistaisi itseään?
Nimittäin, jos koko sivun taustavärinä olisikin vaalea niin eihän se haittaa vaikka taustakuva päättyy alhaalla juuri samaan vaaleaan kuin mitä sivun pohjavärikin on. Ei ainakaan niin paljoa haittaa.
Kiitoksia avusta. Helppoa keinoa tuohon ei siis ole. Jos vaan saisin vielä lukea miten tuo taustakuva toistuisi vain kerran vasemmalta oikealle mutta ei alkaisi uudelleen, niin kokeilen pähkäillä sitten mikä ratkaisu toimisi tuon liukuvärin suhteen parhaiten. ?Korkeudella 1024 tarkoitin, että se riittää 1280 x 1024 resoluutiolla pystysuunnassa koko ruutuun. Tuo taitaa olla se yleisin resoluutio.
Kuten Höpö aikaisemmin mainitsi:
body {
background: url(liukuvari.jpg) repeat-x Black;
}
Tuo toistaa kuvaa ainoastaan vaakasuunnassa. Siihen kun lisää "top" ja "fixed" tai "scroll", riippuen haluatko taustan olevan kiinteästi paikallaan vai scrollaavan mukana. Eli vaikka näin:
body {
background: url(liukuvari.jpg) repeat-x black top fixed;
}
Musta tausta, jossa yläreunasta alkava liukuväri, jota toistetaan vain vaakasuunnassa ja se on kiinteästi paikallaan.
Jos et osaa liittää CSS-tyylejä HTML-sivuun, lue: http://www.w3schools.com/css/css_howto.asp - kokeilemaan
taasnäin: kirjoitti:
Korkeudella 1024 tarkoitin, että se riittää 1280 x 1024 resoluutiolla pystysuunnassa koko ruutuun. Tuo taitaa olla se yleisin resoluutio.
Kuten Höpö aikaisemmin mainitsi:
body {
background: url(liukuvari.jpg) repeat-x Black;
}
Tuo toistaa kuvaa ainoastaan vaakasuunnassa. Siihen kun lisää "top" ja "fixed" tai "scroll", riippuen haluatko taustan olevan kiinteästi paikallaan vai scrollaavan mukana. Eli vaikka näin:
body {
background: url(liukuvari.jpg) repeat-x black top fixed;
}
Musta tausta, jossa yläreunasta alkava liukuväri, jota toistetaan vain vaakasuunnassa ja se on kiinteästi paikallaan.
Jos et osaa liittää CSS-tyylejä HTML-sivuun, lue: http://www.w3schools.com/css/css_howto.aspmikä toimii. Varsinainen sivusto on sellanen liuska, leveys 800 pikseliä, korkeus jo 3000 pikselin luokkaa ja venyy joka viikko. Liukuväri on taas koko näyttöruudun levyiseksi skaalautuva. Tai pitäisi olla....
Joo, kun liukuväritaustakuva päättyy alhaalla niin sen pitää päättyä samaan sävyyn kuin mitä ruudun/sivuston taustaväri on. Olikohan tuossa koodissa se, että taustakuva on vain kerran koko korkeudeltaan mutta ei ala uudelleen, eli fixed kai. No sittenpä näkee.
En kysy mutta mutisen vaan itsekseni. CSS olisi ollut kiva liittää jo heti alussa sillä nyt sivujakin on melkein 20 ja css pitäisi liittää jokaiseen sivuun erikseen...eikä onnistu sittenkään sillä sivut ovat varsin yksilöllisen näköisiä, kaikki erilaisia sillä siellä on uutisia (näitä päivitetään viikottain), kuvagallerioita, linkkisivu....
tästähän ongelman pukkas....
kiitos avustanne! Linkki näytti mielenkiintoiselta ja antaa varmaan infoa muillekin samantyyppisen asian kanssa mietiskelevälle.
- kahdeksankymppinen
Minulta hukkui näytöstä taustakuva, kivoja lintuja,mutta kun kone puhuu englantia niin en osaa näpäyttää sitä oikeata kohtaa "tee tästä taustakuva" kerroppa vanhukselle miten kuvan saan ruutuun omasta lintukuvasta
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
Kyllä suoraan
Sanottua vi.tu.taa. Miksi en toiminut silloin. Sama kun olisi heittänyt smagardin menemään.661512Voisitko nainen kertoa mulle
Tykkäätkö sä musta, vai unohdanko koko jutun? Mä en viitti tulla sinne enää, ettei mua pidetä jonain vainoajana, ku sun1621319- 881162
- 1181129
Miehelle naiselta
Ajattelen sinua aina, en jaksa enää. Ja luulin, että pidit minusta, mutta silloin olisit tehnyt jotain. Mutta sinä et te30932- 104785
- 55710
Olen syvästi masentunut
En oikein voi puhua tästä kenenkään kanssa. Sillä tavalla että toinen ymmärtäisi sen, miten huonosti voin. Ja se että mi89646Iäkkäät asiakkaat ärsyttävät kaupoissa
Miksei Kela järjestä palvelua, jolla toimittaisivat ostokset suoraan ikäihmisille? https://www.is.fi/taloussanomat/art-181627Mitä vastaat jos
Kysyn maanantaina jutteluaikaa ihan arkipäivisistä asioista, rauhassa? Koska nimittäin aion 😍36624