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
1672
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
Kotkalainen Demari Riku Pirinen vangittu Saksassa lapsipornosta
https://www.kymensanomat.fi/paikalliset/8081054 Kotkalainen Demari Riku Pirinen vangittu Saksassa lapsipornon hallussapi852277Olen tosi outo....
Päättelen palstajuttujen perusteella mitä mieltä minun kaipauksen kohde minusta on. Joskus kuvittelen tänne selkeitä tap172244Vanhalle ukon rähjälle
Satutit mua niin paljon kun erottiin. Oletko todella niin itsekäs että kuvittelet että huolisin sut kaiken tapahtuneen111658- 1041458
Maisa on SALAKUVATTU huumepoliisinsa kanssa!
https://www.seiska.fi/vain-seiskassa/ensimmainen-yhteiskuva-maisa-torpan-ja-poliisikullan-lahiorakkaus-roihuaa/1525663921396Hommaatko kinkkua jouluksi?
Itse tein pakastimeen n. 3Kg:n murekkeen sienillä ja juustokuorrutuksella. Voihan se olla, että jonkun pienen, valmiin k1551239Aatteleppa ite!
Jos ei oltaisikaan nyt NATOssa, olisimme puolueettomana sivustakatsojia ja elelisimme tyytyväisenä rauhassa maassamme.2561037- 63943
- 78909
Omalääkäri hallituksen utopia?
Suurissa kaupungeissa ja etelässä moinen onnistunee. Suuressa osassa Suomea on taas paljon keikkalääkäreitä. Mitenkäs ha174893