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
1704
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
Sanna Marin teki sen, mihin muut eivät pystyneet - sote kerralla maaliin
Yli 15 vuotta Suomessa vatvottu sote-uudistus meni lopulta läpi Sanna Marinin hallituksen aikana. Edeltävät hallitukset789317Marinin hallitus hyväksyi soten (105-77) vuonna 2021
vastaan äänesti Kok, persut, KD, Liike Nyt. Nyt on sitten käynyt niin kuin on käynyt. Pääkirjoitus: Sanna Marin jätti905947Pikkupersu osoitti olevansa hieman yksinkertainen
"Heikosti älykkyystesteissä pärjänneistä lapsista tulee muita todennäköisemmin ennakkoluuloisia ja konservatiivisia", uu1045785Jos on heikkolahjainen ja laiska koulupudokas, niin silloin äänestää vasemmistopuolueita
näin tämä on käytännössä aina mennyt. Jos ei älyä ole paljon suotu, niin ei silloin inssiksi opiskella, vaan päädytään394057Enää viisi yötä Sannan kirjaan
Ihan täpinöissään tässä odotellaan. Vaikea pysytellä aloillaan, kun koko ajan tekisi mieli jo kirjakauppaan rynnätä, mut483995Kannattaako suomalaisen duunarin enää äänestää vasemmistopuolueita
sillä eivät ne tunnu kovasti ajavan suomi-duunarin etuja. Jos katsotaan Vasemmistoliittoa, niin sehän on ihan feministi783832Sanna-kulttilaiset hehkuttaa edelleen Marinia, vaikka esim. Sote oli susi jo syntyessään
mutta kulttilaiset eivät ole järjen jättiläisiä, ja sanoihin Lasse Lehtinenkin, että Suomessa on pohjoismaiden tyhmimmät493679Lehtinen: "Oli demareidenkin onni, että valkoiset voittivat sodan 1918"
Lasse Lehtisen mukaan vasemmalla on radiohiljaisuus hänen uutuuskirjastaan, "Läheltä piti. Kansakunnan hurjat hetket" L1133070IL - 100 000 potentiaalista sotilasta pakeni Ukrainasta!
"Ukrainasta nuorten miesten joukkopako Liki 100 000 asevelvollisuusikäistä miestä on poistunut Ukrainasta parin viime k582885SDP:n valtuutettu valehtelee koulutuksensa
SDP:n helsinkiläinen kaupunginvaltuutettu Mahad Ahmed käyttää maisterin titteliä suoritettuaan 60 opintopisteen epäviral982859