Keskustelu: Nettisivujen teko: Nettisivun taustakuva ja zoomaus

Eliikäs millä koodilla saan html taustakuvan niin, että se ei liiku mihinkään vaikka zoomaan sivua....eli miten saan sen niin, että se ei skaalaudu zoomin mukaan vaan pysyy ko. ajan vakiona

Eikös se kuitenkin ole ihan hyvä, että se skaalautuu zoomin mukana? Itse en ainakaan keksi, miksei tausta saa skaalautua muun sisällön mukana.

edit:
Voisitko heittää esimerkin, missä tällainen toiminto olisi käytössä?

Tuo on selaimen ominaisuus, eikä siihen oikein voi vaikuttaa background imagena.
Tietysti voit tehdä jonkun divin, ja asettaa kuvan sinne.
sen jälkeen alat pollaamaan ruudun kokoa, ja vaihdat divin kokoa aina suhteessa saatuun ruuduun kokoon.

tsk955: Vai puhutko nyt vain yksinkertaisesti sivun koon muuttamisesta?

Silloin css-määre: "background-size:cover; " voi auttaa jossain määrin.

Lebe: tuolloinhan taustakuva juuri skaalautuu zoomaustason mukaan, eli ei vastaa sitä mitä haluttiin.

No johan mä sanoin, et jos tsk955 tarkottaakin "zoomaamisellaan" sitä ikkunan koon muuttamista.

edit:

The Alchemist kirjoitti:

Lebe: tuolloinhan taustakuva juuri skaalautuu zoomaustason mukaan, eli ei vastaa sitä mitä haluttiin.

Toisaalta, jos se on koko setin taustakuvana (esim. body), niin kuva ei "zoomaannu" zoomatessa tiettyyn zoomitasoon asti (ainakaan Chromella), mikä taas olisi sinnepäin mitä tsk955 kysyi, joskin tausta käyttäytyy hieman epävakaasti vierityspalkkien ilmaannuttua yms... Hommassa vaan pitää olla suhteessa tietyn kokoinen taustakuva sisältöön nähden, että helpommalla pääsisi juuri javaScriptillä (esim. jQueryn onResize-listenerillä) koon muuttamisella.

https://dl.dropboxusercontent.com/u/62178918/bg/bg.html

Minusta tässä nyt mennään ihan metsään, jos lähtöoletus on se, että kysyjä kysyi väärän kysymyksen ja siksi pitää vastata väärin, jotta se olisi oikea vastaus oikeaan kysymykseen.

Olen kiinnittänyt huomiota siihen, miten täällä Putkassakin on alkanut olla trendinä, etteivät ihmiset tiedä yksinkertaistenkaan sanojen merkitystä, ja sitten molemmin puolin yritetään arvailla, kuka sanoi mitäkin ja mitä oikeasti tarkoitettiin. Ja sitten siitä ei tule enää hevonhelvettiä, kun puolentusinaa tyyppiä kertoo eri vastauksen eri kysymykseen, jota kaikki pitivät oikeana tulkintana vääristä sanoista.

Elikkäs tässä kaikille esimerkki sivu jossa tausta EI reagoi "zoomaamiseen"

http://publichd.se/index.php?page=torrent-details&id­=44f3952c314072b426de9c7f7f4a549c2fe506c2

Tuollaisen haluan eli tuo itse kuva ei reagoti mitenkään vaikka "zoomaan" edemmäs/lähemmäs

En edelleenkään ymmärrä, mitä tarkoitat. Tuon esimerkkisivusi taustakuva nimenomaan muuttuu zoomattaessa ihan samalla tavalla kuin kaikki muukin sivulla. Tosin on totta, että silloin taustakuva ei varsinaisesti reagoi mitenkään vaan toimii ihan odotetusti kaikkien muiden sivun osien mukana.

Jos tuo on tavoitteesi, voit laittaa sivulle ihan tavallisen taustakuvan vaikka tällaisella CSS-koodilla:

html {
	background: url("kuva.jpg") no-repeat;
}

The Alchemist kirjoitti:

Minusta tässä nyt mennään ihan metsään, jos lähtöoletus on se, että kysyjä kysyi väärän kysymyksen

Usein mennään (kuten ehkä nyt), mutta joskus kyllä on hyväksi ystävällisesti ymmärtää, mitä kysyjä kysyy. Vaikea on olettaa, että kysymys on oikea, jos kukaan ei saa edes selvää kysymyksestä.

The Alchemist kirjoitti:

Olen kiinnittänyt huomiota siihen, miten täällä Putkassakin on alkanut olla trendinä, etteivät ihmiset tiedä yksinkertaistenkaan sanojen merkitystä,

Minustakin on suuri ongelma, että kysyjät eivät tiedä, mitä kysyvät. Ottaisivat selvää asioista ensin. Turha täällä on mitään kysellä, jos ei etukäteen tiedä.

Metabolix kirjoitti:

Minustakin on suuri ongelma, että kysyjät eivät tiedä, mitä kysyvät.

Mun mielestä epäselvät kysymykset viestivät juuri siitä, että termit on saattanut mennä sekaisin. Silloin minä kysyn tätä:

Lebe80 kirjoitti:

Voisitko heittää esimerkin, missä tällainen toiminto olisi käytössä?

Selvästikään "zoomista" ei ollut kyse, vaan enemmänkin ehkä "scrollaamisesta". Eli vaikka sivua vierittää, niin kuva "pysyy" paikoillaan.

tsk955: olisiko se oikea asia mitä nyt haet?

Lebe80, viestini loppu oli pitkälti sarkasmia, vaikka toki kysyjät saisivatkin kertoa asiansa selvästi, yksiselitteisesti ja mieluummin alkeellisella kielellä selittämällä kuin vetämällä hatusta pari väärää sanaa.

Enpä edes huomannut kokeilla skrollausta, kun jo ensimmäisessä kysymyksessä puhutaan zoomista ja skaalautumisesta. Jos nyt sitä haettiin, edelliseen koodiesimerkkiini pitää lisätä listan loppuun vielä sana fixed.

Nyt on pakko kysyä sitä, että millä ihmeellä AP on itsensä pahoinpidellyt siihen kuntoon, että sivun vierittäminen eli scrollaus evaluoituu pään sisällä zoomaamiseksi ja skaalautumiseksi?

Selkokielellä haluan sivun taustakuvan käyttäytyvän samalla tavalla kuin esimerkissä, ei muuta...lisäksi olisi kiva jos siihen ei tarvitsis css koodia kun en stä osaa käyttää kun vasta aloittelija olen.

Lisäys: Niin ja miten saan sivun zoomaamaan keskelle eikä kulmaan/reunaan kuten esimerkissä

Älä puhu zoomaamisesta, kun et tarkoita zoomaamista. Johan tästä puhuttiin. Tarkoitat taustakuvan asemointia, jolla ei ole mitään tekemistä skaalaamisen eikä zoomaamisen kanssa. Skaalaaminen ja zoomaaminen eivät nekään ole synonyymejä.

Css on ainoa tapa lisätä tyylimuotoiluita nettisivulle. Jos olet aloittelija, niin on erityisen tärkeää, ettet lähde säheltämään omiasi vaan teet niin kuin asiat pitäisi tehdä.

CSS-koodin käyttäminen on helppoa: lisäät vain sivun alkuun head-tagien väliin style-tagit ja laitat CSS-koodin niiden väliin.

Metabolix kirjoitti:

CSS-koodin käyttäminen on helppoa: lisäät vain sivun alkuun head-tagien väliin style-tagit ja laitat CSS-koodin niiden väliin.

Ok mutta jos määritän css:ssä esim. kaikki <p> ovat tyyliltään esim Arial niin miten saan muokattua niin, että yksi kyseisen säännön omaavista teksteistä poikkeaa tuosta tyyliltään.

tsk955 kirjoitti:

esim. kaikki <p> ovat tyyliltään esim Arial niin miten saan muokattua niin, että yksi kyseisen säännön omaavista teksteistä poikkeaa tuosta tyyliltään.

Lisäät tälle p-elementille vaikkapa id:n näin:

<p id="poikkeavatyyli">Tekstiä</p>

Ja css:

p { /* Tämä on oma sääntösi, jossa määrität Arialin kaikille p-elementeille */
	font-family: Arial, Helvetica;
}

p#poikkeavatyyli {
	font-family: Georgia;
}

Ja sitten millään muulla elementillä samalla sivulla EI SAA olla samaa id:tä kuin tuolla p:llä, eli sivulla voi olla vain yksi tietyn id:n omaava elementti.

Jos haluat, että monella p-elementillä samalla sivulla on fonttina Arialin sijasta Georgia, laita niille elementeille class-määrite, ja sitten css:ssä määrittelet tietyn fontin tietyn class-määritteen omaaville elementeille.

<p class="poikkeavaelementti">Ensimmäinen poikkeava elementti</p>
<p class="poikkeavaelementti">Toinen poikkeava elementti</p>

p.poikkeavaelementti {
	font-family: Georgia;
}

Luulenpa että kyse oli myös ikkunan koon muuttamisesta, sillä ko. sivulla taustakuva pysyy saman kokoisena, vaikka ikkunan kokoa muutetaan.

Jos ongelma on ratkaistu ja ole väärässä, hyvä. Mutta ellei ole, tähän voisi etsiä ratkaisun, ja ellen väärin muista taisi ratkaisu tullakkin jo.

Edit. Enpä jaksanut etsiä toista sivua jossa on taustakuva ja tarkistaa skaalautuuko se ikkunan koon mukaan.

dartvaneri kirjoitti:

ellen väärin muista taisi ratkaisu tullakkin jo.

No sehän on helppo tarkistaa, kun vähän rullaa sitä selaimen vierityspalkkia ja lukee nämä pari viestiä.

dartvaneri kirjoitti:

Luulenpa että kyse oli myös ikkunan koon muuttamisesta, sillä ko. sivulla taustakuva pysyy saman kokoisena, vaikka ikkunan kokoa muutetaan.

Jos ongelma on ratkaistu ja ole väärässä, hyvä. Mutta ellei ole, tähän voisi etsiä ratkaisun, ja ellen väärin muista taisi ratkaisu tullakkin jo.

Edit. Enpä jaksanut etsiä toista sivua jossa on taustakuva ja tarkistaa skaalautuuko se ikkunan koon mukaan.

Nou tuo oli jo lähemmäs sitää mitä tarkoitin koska mulla taustakuvan koko muuttuu kun ikkunan koko muuttuu ja en halua että se muuttuu....joten siihen olisi kiva saada jostakin koodit. :D

tsk955 kirjoitti:

Nou tuo oli jo lähemmäs sitää mitä tarkoitin koska mulla taustakuvan koko muuttuu kun ikkunan koko muuttuu ja en halua että se muuttuu....joten siihen olisi kiva saada jostakin koodit. :D

Vinkkinä, että voit aina tarkistaa muiden nettisivuilta (esim. tuolta linkkisi takaa css-tiedostosta tai nykyselaimista painamalla F12-näppäintä), että miten se on tehty.

Linkkisi taustakuva on tehty näin (laita bodyn tilalle elementti, johon taustakuvan haluat):

body{
background: url(http://publichd.se/images/broke.city.jpg) 50% 0% no-repeat fixed rgb(0, 0, 0);
}