Olikos jollakin tapaa mahdollista saada taustakuva pysymään scrollatessa paikallaan?
eli vain sivujen sisältö (Kuvat, teksti yms..) liikkuisi up 'n down, mutta taustakuva pysyisi paikallaan?
eli vain sivujen sisältö (Kuvat, teksti yms..) liikkuisi up 'n down, mutta taustakuva pysyisi paikallaan?
Vastaukset 9
Vanhimmat
TESTI
BODY {
background-image: url('taustakuva.jpg');
background-scroll: no;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.
.
.
Mikä merkillinen tuo
background-scroll: no;
kuvittelee olevansa? Se ei ole oikeaa css:ää eikä minkään tunnetun selaimenlisäyskään..
Muuten kyllä meni oikein. Saman saa tosin kirjoitettua lyhyemminkin
body {
background : url(taustakuva.jpg) no-repeat fixed center;
}
CSS jutut ovat hepreaa mutta tuo toimi ainakin firefoxilla. muilla selaimilla en ole vielä kokeillutkaan. kunhan nyt saisi ensin oikeaa sisältöä sivuille niin sitten pääsee kokeilemaan muillakin selaimilla.
toki myönnän ettei tuo ole kokonaan oikein. Jospa
background-scroll: none;
olisi lähempänä. none; atribuutti ainakin kuuluu css:ään.
En ole vielä kokeillut tuota kyseistä koodin pätkää jonka kirjoitit mutta näyttäisi siltä että kuva toistuu vain kerran ja se on keskitetty sivun keskelle, mutta tuolla koodilla kuva liikkuu scrollatessa.
background-scroll: ???;
eli mikäs olisi aivan aito korvike noille kymysysmerkeille jotta kuva pysyy scrollatessa paikallaan ja vain sivun sisältö liikkuu ??
???
background-scroll: no-scroll;
background-scroll: none;
???
Ei tuollaista olekaan kuin "background-scroll", eli siihen on turha mitään kokeilla. Tai siis ihan sama mitä siihen laittaa.
Otetaampa uudestaan rimpsusi:
BODY {
background-image: url('taustakuva.jpg');
background-scroll: no;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
Niin mietitäämpä mitä mikin noista tarkoittaa:
background-image: url('taustakuva.jpg');
tämä on helppo, tässä määrätään mikä on taustakuva
background-scroll: no;
tällaista ei ole ainakaan css:ssä
background-position: top | center | bottom | left | right | prosenteilla määritellyt (myös negatiivisilla) arvot | eri mittayksiköillä määritellyt ( ex|em|px|cm|mm|pc|in|pt , myös negatiiviset) arvot;
Myöskin yhdistelmät käy, esim
background-position: top right;
background-position: 100px 200px;
background-repeat: repeat-x | repeat-y | no-repeat | repeat;
no tässä tietenkin määritellään toistuuko taustakuva ja jos toistuu toistuuko vertikaalisesti, horisontaalisesti vai molemmin.
background-attachment: scroll | fixed;
HAA, taustan kiinnittyvyys!! tämä on se jota etsit :) Sehän sulla oli tuossa joten siksi se toimi vaikka siellä oli myös täysin huuhaamäärite.
Siitä kirjoittamastani:
On aivan sama käyttääkö tuota pitkää jonka sinä kirjoitit vai lyhennystä jonka minä kirjoitin. Minä vain käytän tietenkin aina mahdollisimman lyhyttä muotoa :)
Lisäksi löytyy vielä
background-color : #F5DEB3;
Ja tähän täytyy vielä lisätä että nykyselaimista paskin (eli InternetExplorer ei ymmärrä kaikkia lyhenteitä (kuinkas ollakaan. oiskohan jotain uutta siinä ettei IE osaa webbimääritelmiä kuin hädintuskin auttavasti).
Kannattaa siis aina testata myös IE:llä ettei tule yllätyksiä..
Hassua tässä on se että tuo background-scroll: no; auttoi asiaa kovasti.
eli ilman sitä riviä tausta kuva oli keskellä ja toistui vain kerran. naänhän se pitikin olla. vikana tosiaan oli se ettei kuva pysynyt scrollatessa paikallaan. tuon rivin kun lisäsin niin homma pelitti.
background-attachment: fixed; eli tällä komennollahan tuon kuvan olisi pitänyt jo pysyä paikallaan, eikös niin. ei vain pysynyt. lisäsin tuon huuhaan ja sen jälkeen tosiaan kaikki oli niinkuin pitää.
testasin sivuja IE:llä ja firefox:lla ja molemmilla tulos oli sama.
en ole voinut unohtaa tallennustakaan. rimpsu oli jo ensimmäisellä yrittämällä vain vaille tuota huuhaa riviä..
tää on taas näitä henkimaailman juttuja =)
kiitos avusta =)
Enhän kokeillut tuota kuin FF:llä myöhemmin pyörittänyt myös IE:llä =)
Varmasti toimii se background-attachment: fixed;
ihan yksinäänkin MUTTA uskon kyllä tuohon henkimaailmaankin.
NIMITTÄIN tänä aamulla Operani ei suosutunut millään tekemään taustakuvan sijoitusta oikein:
background-position: 14px center;
Tuossahan on tarkoitus että taustakuva on 14pikselin päässä yläreunasta mutta keskitettynä.
KAIKKI muut yhdistelmät sijoutuksessa kelpasi mutta ei tuo px -center -yhdistelmä. Ei sitten millään.
No sitten tenavani vetäs tietokoneen töpselin irti seinästä ja kun koitin hetken päästä uudestaan niin mitään ongelmaa ei ollut olemassakaan.
Henkimaailman juttuja.
Testasin tuon sinun 2. viestissä olleen koodin mukaan;
NS, toimi
FF, toimi
Opera, toimi
(IE:llä testauksen lopetin vuosi sitten)
Poistin sitten tuon 'background-scroll' rivin, ja ihme ja kumma;
NS, toimi
FF, toimi
Opera, toimi
Eli ei se vaikuttanut asiaan.