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

3814

    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. Persujen mukaan rasismi on huumoria

      Vaan kun koomikko kutsui Halla-ahoa fasistiksi, niin piti haastaa oikeuteen. Mihin se huumorinitaju yhtäkkiä hävisi? ⠀
      Maailman menoa
      87
      4362
    2. BOIKOTOIN - Ei mitään Suomi.fi postilaatikoita käyttöön

      Ainakaan minulle! Vai että pitäisi alkaa siellä käyädä katselemassa tammikuusta 2026 siis periaatteessa päivittäin että
      Maailman menoa
      198
      3584
    3. 202
      2961
    4. Lasse Lehtonen vaatii persuja pyytämään anteeksi aasialaisilta

      Persut ova romahduttaneet Suomen maakuvan parissa päivässä negatiiviseksi rasismillaan ja se alkaa vaikuttamaan jo Suome
      Maailman menoa
      69
      2800
    5. Hallitus on kaadettava ja Orpon on erottava

      Mikään muu hallitus ei ole oman elämäni aikana tuhonnut näin paljon tämän maan taloutta ja työllisyyttä sekä suomen main
      Maailman menoa
      54
      2699
    6. Lasse Lehtonen palasi ambulanssilennolla Suomeen

      Nyt on syytä lopettaa irvailu.
      Maailman menoa
      78
      1250
    7. 60
      1226
    8. Aitolehti Capital

      HehkuB on myynnissä, kovalla työllä saavutettu unelma joka sekin lässähti kuten kaikki mihin ryhtyy! Nyt Sewen asialle
      Kotimaiset julkkisjuorut
      238
      1052
    9. MOT: Työmarkkinatori on olemattomien työpaikkojen hakupaikka

      Työpaikkojen tietoja ei tarkisteta, ja ainakin noin noin 10% on olemattomia työpaikkoja ja sen lisäksi eri rekryfirmat t
      Maailman menoa
      120
      963
    10. Missä kuussa

      Rakkaasi on syntynyt?
      Ikävä
      58
      949
    Aihe