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
1754
Vastaukset 6
- 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
- 601049
- 981024
Tiesitkö? Jorma Uotisen EX-rakas on Helena Lindgren - Nämä ovat välit nyt: "Me ollaan..."
Jorma Uotinen ja Helena Lindgren olivat avoliitossa v. 1982-1999. Pariskunta oli aikansa näyttävä julkkispari, missä i21882Olet nainen ollut vaikein rasti
Eniten olet tunteitani myllännyt ja niitä kuluttanut, ja tuottanut. 🤔60810- 135802
Anteeksi J-mies
Anteeksi että myötävaikutin siihen että rakastuit minuun, jota et voi koskaan saada. Viimeksi kun näimme ja katselimme t124795Kenen viisautta on ollut laittaa tie väärällä murskeella pilalle
Kenen viisautta on ollut kun Siimeksen/Kylmänpurontie pantu pilalle kun on ajettu liian karkeaa mursketta. Rengasliikke25679- 45666
- 51660
Minä muistan
Minä muistan sinut nauravana. Sellaisena, joka sai tavallisenkin hetken tuntumaan vähän kevyemmältä, kuin huoneeseen ol45620Kuhmolainen opettaja tuomittu vainoamisesta
https://yle.fi/a/74-20248184 ”Kuusikymppinen kuhmolaisnainen piinasi naapureitaan lähes kahdeksan vuoden ajan. Nainen14615- 19607
Siinä kävi mies nyt niin että tämä ämmä muuttaa ulkomaille
Vuonojen maa kutsuu, joten ei hätää. Et kuule minusta enää. 😂 Lycka till! Ämmä riittää.83586- 46578
Koska Martina viettää aikaansa lapsiensa kanssa
Äiti vaan juoksee miehen perässä Tallinnassa, Lontoossa, Turussa. Kyllä oli kätilö oikeassa, kun sanoi, että ei olisi ka141575Mitä muuta on olemassa kuin lisääntyminen
Jos mies ei pääse lisääntymään niin mikä hänen osansa elämässä on? mitä jää jäljelle? Hän on vain muiden palvelija kok128573- 35570
Ähtäri on taas TV: n ja radion ykkösuutinen
Uusi podcast on julkaistu ja on nyt kuunneltavissa. Mot on tehnyt hyvää työtä! Mikko Savola ja kepu ei ota mitään vast47568- 48527
Pahkalassa tapahtuu
Mitäs on tapahtunut yöllä pahkalan kerrostaloilla.oli poliisia ja ambulanssia taas vaihteeksi9523