Hei, olen yrittänyt etsiä netistä tietoa tähän ongelmaan, turhaan...
Eli yritän tehdä seuraavaa:
1.) Koko näytön kokoinen alue esim. <section> (1440x770px)
2.) Sen sisään toinen alue esim. <div> (970x770px)
3.) Ja kahden edellisen alueen sisään kuva esim. <figure>
- Kuvalle annetaan koko: 970px 770px (alkp. koko 1940x1540px).
- Alueen? Pitäisi myös olla fixed, jotta kuva tavallaan liukuisi esiin
..okei parempi että en tämän enempää seöitä, mutta jos joku jaksaa neuvoa. Tässä vielä linkki siihen mitä olen tekemässä suunnilleen:Hahmo pysyy paikallaan
En saa jostain syystä tehtyä samalla logiikalla "retina" -kuvaa toimimaan samoin.
Kyllä tuo minusta toimii aivan oikein, kunhan et sähellä mitään omaa. Tee vain hyvin muotoiltua html:ä ja tyylittele se CSS:n avulla, niin ei pitäisi olla mitään ongelmaa asian kanssa. Alla pieni esimerkki miten voit ehkä käyttää pohjana.
<!DOCTYPE html>
<html>
<head>
<title>Position: fixed esimerkki</title>
<style type="text/css">
img {
position: fixed;
top: 50px;
right: 30px;
}
p {
width: 300px;
}
</style>
</head>
<body>
<section>
<div><img src="kuva.png" width="970px" height="770px" /></div>
</section>
<p>Lisää Lorem ipsumia tarpeeksi, jotta saat sisältöä</p>
</body>
</html>late kirjoitti:
Tässä vielä linkki siihen mitä olen tekemässä suunnilleen:Hahmo pysyy paikallaan
Usein kyse on background-attachment ominaisuuden hahmottamisesta. Ks.:
Selainikkunaan kiinnitetty taustakuva
jahka siitä olisi apua. Huomaa pienentää selainikkunaa, mikäli tuon sivun taustakuva (oikein leveillä näytöillä) ei näy ollenkaan.
Okei kiitoksia, luulen että nyt sain toimimaan. Mahdolliset ongelmat saattoivat johtua siitä että teen Foundationin sisään ja liikaa alueita. Nyt näin yksinkertaisesti ja kuvakin "HD" ! Kiitän:
HTML:
<!-- Lähdekoodi-kuva --> <div id="bg-img"></div>
CSS:
// Lähdekoodi-kuva
#bg-img {
background: #141414 url("../images/source-code.png"); // väri + kuva
background-position: center 45px; // asettelu
background-repeat: no-repeat; // ei toisteta
background-attachment: fixed; // kiinnitetään selainikkunaan
background-size: 970px 770px; // koko (originaali: 1940x1540px)
width: 100%;
height: 770px;
}Aihe on jo aika vanha, joten et voi enää vastata siihen.