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
1698
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
- 2082605
Törkeä eläinsuojelurikos Sonkajärvellä
Pohjois-Savossa Sonkajärvellä noin 40 kissaa ja reilut 10 koiraa on jouduttu lopettamaan kaltoinkohtelun vuoksi, kertoo471785Jotkut ihmiset pelkäävät syöpää sairastavaa
On hauskaa, kun kertoo jollekin, että "minulla on syöpä". Jotkut käyttäytyvät kuin se olisi tarttuva tauti. Eivät uskall1461387Lavrov suivaantui Stubbille perustellusti.
Lavrov perusteli suivaantumistaan tosiasioilla Suomen tarinasta sotiemme jälkeen, tutkija Tynkkynen ja pankkihenkilö Sol3401290Sukupuolia on vain kaksi- kohukassista tuli kova tuomio perheenisälle oikeudessa.
https://www.iltalehti.fi/kotimaa/a/4d4db0d9-4dda-4ba6-a699-25d725683ad6 Miten näin normaalista kassissa olevasta tekstis3451244Kääminsä polttanut taksi suomussalmella
Vieläkö sillä hermonsa menettäneellä hulluja ylinopeuksia ajavalla asiakkaansa haukkuvalla( jos ajat paska kyydin hänen251166Se ei ihan oikeasti vaatisi kuin yhden
Tekstiviestin... Jos rakastat minua vielä toivoisin että laittaisit minulle viestiä. Rakastatko? Oletko oikeasti niin pe571103Eronnut Janni Hussi palaa julkisuuteen - Aloittaa uudessa työssä, joka on aivan uusi pesti Suomessa
Janni Hussi on saanut viime aikoina kohujulkisuutta, kun hänen ja Joel Harkimon avioliitto päättyi eroon kesällä 2025. H131002- 55976
Jorma Uotinen avaa sanaisen arkkunsa TTK-miesparista ja koko uudistuksesta: "Sehän on..."
Tanssii Tähtien Kanssa -parketilla nähdään ensimmäistä kertaa Suomessa tanssiparina miespari kauden alusta asti. Mikko S21883