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

3743

    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. Ensitreffit Jenni laukoo viinilasin ääressä suorat sanat Jyrkin aikeista: "Mä sanoin, että älä"

      Voi ei… Mitä luulet: kestääkö Jennin ja Jyrkin avioliitto vai päättyykö eroon? Lue lisää: https://www.suomi24.fi/viihde
      Ensitreffit alttarilla
      27
      2870
    2. Ymmärrän paremmin kuin koskaan

      Roikut kädessäni ja vedät puoleesi. Näen kuitenkin tämän kaiken lävitse ja kaikkien takia minun on tehtävä tämä. Päästän
      Tunteet
      33
      2525
    3. Mitä ajattelit ensimmäisenä kaivatustasi

      kun näit hänet?
      Ikävä
      148
      2274
    4. Hullu liikenteessä?

      Mikä hullu pyörii kylillä jos jahti päällä? Näitä tosin kyllä riittää tällä kylällä.
      Kiuruvesi
      54
      2239
    5. Niina Lahtinen uudessa elämäntilanteessa - Kotiolot ovat muuttuneet merkittävästi: "Nyt on...!"

      Niina, tanssejasi on riemukasta seurata, iso kiitos! Lue Niinan haastattelu: https://www.suomi24.fi/viihde/niina-lahti
      Suomalaiset julkkikset
      24
      1860
    6. Kun Venäjä on tasannut tilit Ukrainan kanssa, onko Suomi seuraava?

      Mitä mieltä olette, onko Suomi seuraava, jonka kanssa Venäjä tasaa tilit? Ja voisiko sitä mitenkään estää? Esimerkiks
      NATO
      390
      1696
    7. Ano Turtiainen saa syytteet kansankiihoituksesta

      Syytteitä on kolme ja niissä on kyse kirjoituksista, jotka hän on kansanedustaja-aikanaan julkaissut Twitter-tilillään
      Maailman menoa
      104
      1642
    8. Pyhäinpäivän aamua

      Oikein hyvää huomenta ja rauhallista päivää. ❄️😊🥱☕❤️
      Ikävä
      309
      1548
    9. Kunta ostaa kivitipun

      Kunnanjohtajan tuleva uusi ostokohde
      Lappajärvi
      135
      1459
    10. Varokaa! Lunta voi sataa kohta!

      Vakava säävaroitus Lumisadevaroitus Satakunta, Uusimaa, Etelä-Karjala, Keski-Suomi, Etelä-Savo, Etelä-Pohjanmaa, Pohjanm
      Maailman menoa
      13
      1446
    Aihe