Taustakuvan keskitys CSS:llä

tempukka.net

Niin...

Eli tuollanen ongelma olis. 1500px leveä ja 15px korkea liukuvärikuva pitäs saada taustalle nettisivuihin. Kuva pitäs saada keskitettyä. Esimerkki sivun tausta:

www.teippari.com

Eli html:n sekaan css-koodia. Millasella koodilla tapahtuu?

8

3786

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • aaH

      Omalla koneellani ainakin tuo näyttäisi olevan oikein. Eli tuo kaikista vaalein kohta keskellä sivua. Jos se siis oli tarkoituksena?

      Kokeilin vielä kahdella eri resoluutiolla ja molemmilla näytti menevän oikein.

    • aaH

      Vai oliko tuo sivu vain esimerkkinä siitä, minkälainen sen tulisi olla?

      body {   background-image: url(kuvat/pohja_tile.jpg);
         background-color:#0D5580;
         background-repeat:repeat-y;
         background-position:center;
      }

      Tuollainen koodi on kyseisellä sivulla. Luultavasti haet tuota background-position:center -koodia.

      • tempukka

        Jep. Eli esimerkkinä oli miten pitäs olla. Tuo css-koodi oli kyllä tiedossa, mutta kuinka sen saa html-yhteyteen niin se on pikkasen hämärää. Eli html:n sekaan tekemättä erillistä css-tiedostoa.


      • css html:n "sekaan"
        tempukka kirjoitti:

        Jep. Eli esimerkkinä oli miten pitäs olla. Tuo css-koodi oli kyllä tiedossa, mutta kuinka sen saa html-yhteyteen niin se on pikkasen hämärää. Eli html:n sekaan tekemättä erillistä css-tiedostoa.

        div.esimerkki {margin: 10px;}


        Huhuu!
        Huhuu 2!


      • aaH
        tempukka kirjoitti:

        Jep. Eli esimerkkinä oli miten pitäs olla. Tuo css-koodi oli kyllä tiedossa, mutta kuinka sen saa html-yhteyteen niin se on pikkasen hämärää. Eli html:n sekaan tekemättä erillistä css-tiedostoa.

        Eli laitat siit tuon kyseisen koodin style-tagien sisään ja head-osaan.

        Käytännössä näin:

        ...


        koodia


        ...


      • lkfjgdljgdfglkd
        aaH kirjoitti:

        Eli laitat siit tuon kyseisen koodin style-tagien sisään ja head-osaan.

        Käytännössä näin:

        ...


        koodia


        ...

        Juu, eli kaks vaihtoehtoa on. Joko sinne head -osioon, jolloin tulee toi type="text/css" mielellään tai sit tagin sisään, jolloin ei mitään tagia tarvita, vaan se on attribuuttina.


        div.esimerkki {margin: 10px;}


        Huhuu!
        Huhuu 2!


      • tempukka
        lkfjgdljgdfglkd kirjoitti:

        Juu, eli kaks vaihtoehtoa on. Joko sinne head -osioon, jolloin tulee toi type="text/css" mielellään tai sit tagin sisään, jolloin ei mitään tagia tarvita, vaan se on attribuuttina.


        div.esimerkki {margin: 10px;}


        Huhuu!
        Huhuu 2!

        Juu...

        Tuollasen koodin sain väsättyä ja muuten toimii, mut taustan molemmille reunoilla ja ylhäällä on n.10 px leveät valkoset reunat.


        div.tausta
        {
        background-image: url('tausta1.png');
        background-repeat:repeat-y;
        background-position: center 50%;
        }


         

        Kuinka nuo kehykset saa heivattua pois niin, että taustakuva alkas ihan äärivasemmasta päättyen äärioikealle? Eli taustan pitäisi olla koko näytön suuruinen.


      • aaH
        tempukka kirjoitti:

        Juu...

        Tuollasen koodin sain väsättyä ja muuten toimii, mut taustan molemmille reunoilla ja ylhäällä on n.10 px leveät valkoset reunat.


        div.tausta
        {
        background-image: url('tausta1.png');
        background-repeat:repeat-y;
        background-position: center 50%;
        }


         

        Kuinka nuo kehykset saa heivattua pois niin, että taustakuva alkas ihan äärivasemmasta päättyen äärioikealle? Eli taustan pitäisi olla koko näytön suuruinen.

        Jostain syystä, jos laittaa "pohjaksi" div-elementin, niin se tekee vasemmalle ja oikealle juuri tuollaiset n.10px reunukset. Jos mahdollista, niin laita tuo taustakuva body-elementtiin. Tai sitten negatiivisella marginaaleilla korjaat nuo reunukset.

        div.tausta { ...
        margin-left: -10px; }


    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Tänään pyörit ajatuksissa enemmän, kun erehdyin lukemaan palstaa

      En saisi, silti toivon että sinä vielä palaat ja otetaan oikeasti selvää, hioituuko särmät ja sulaudummeko yhteen. Vuod
      Ikävä
      22
      5134
    2. Huomenta ihana

      Kauniskasvoinen ihanuus 😘 saan sut vielä
      Ikävä
      25
      4308
    3. Hei rakas...

      Miten on työpäivä sujunut? Rakastan sinua 💗
      Ikävä
      27
      2451
    4. Edelleen sitä on vaikea uskoa

      Että olisit oikeasti rakastunut muhun
      Ikävä
      34
      2234
    5. Toiveikas vai toivoton

      torstai? Ajatuksia?
      Ikävä
      37
      1998
    6. Vitsi mihin menit. Heti takasin.

      Mä näin sut tuu takasin! Oli kiire, niin en ehtiny sin perään!
      Ikävä
      15
      1908
    7. En ole koskaan kokenut

      Ennen mitään tällaista rakastumista. Tiedän että kaipaan sinua varmaan loppu elämän. Toivottavasti ei tarvitsisi vain ka
      Ikävä
      19
      1587
    8. Mukavaa päivää

      Mun rakkauden kohteelle ❤️ toivottavasti olet onnellinen
      Ikävä
      12
      1521
    9. Voi ei! Jari Sillanpää heitti keikan Helsingissä - Hämmästyttävä hetki lavalla...

      Ex-tangokuningas on parhaillaan konserttikiertueella. Hän esiintyi Savoy teatterissa äitienpäivänä. Sillanpää jakoi kons
      Suomalaiset julkkikset
      21
      1237
    10. Kerranki asiat oikein

      Ilkka ja muut pienpuolueeet...teitte hyvän työn kun valitsitte pätevän henkilön virkaan eikä kepulle passelia!! Jatkakaa
      Haapavesi
      10
      1164
    Aihe