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

3837

    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. Pike surkea

      Pike on surkea
      Ikävä
      15
      3329
    2. Vesikin maksaa, miksei hengitysilma?

      Jatkuvasti itketään ettei ole rahaa mihinkään, mutta tilastojen mukaan rahaa on enemmän kuin koskaan, joten miksei asial
      Maailman menoa
      2
      1625
    3. Satuolennoista tarinointi ei kuulu peruskoulun tehtäviin

      Opetustunteja on muutenkin käytössä vain rajallinen määrä. Eli nämä satuhommat koulun ulkopuolelle vapaaehtoisiin harras
      Maailman menoa
      106
      1577
    4. Suomalainen perheenisä vaatii Suvivirren esittämisestä hyvityksiä

      Itse lapsena uskonnonopetuksesta vissiin traumoja saanut ihka suomalainen (!) perheenisä vaatii Espoon kaupungilta korva
      Maailman menoa
      225
      1075
    5. Lahkokasteen ja kristillisen kasteen erot

      Raamatun mukaan Kristillisessä yhdessä kasteessa Jumala pesee ja puhdistaa ihmisen sydämen ja poistaa perisynnin kirouks
      Kaste
      422
      1068
    6. Mitä haluaisit

      Tehdä kaivattusi kanssa?
      Ikävä
      124
      871
    7. Heikki Paasosen Marita-vaimo jätti tunteikkaat jäähyväiset: "Tällä kertaa me..."

      Heikki Paasonen on naimisissa Marita Paasosen (os. Alatalo) kanssa ja heillä on kaksi pientä lasta. Nyt koitti aika jätt
      Suomalaiset julkkikset
      2
      836
    8. Kuka omistaa keltaisen vanhan aravan?

      Pitäs saada rakennuksen omistajaan yhteys, rappukäytävät on siivottomassa kunnossa. Hiekkaa ja roskia rappusissa, lisäks
      Haapavesi
      29
      807
    9. Känsäkoura ja hotelli

      Tietoa kuka ostanut?
      Kuhmo
      10
      805
    10. Pirkanlinna yleisötapahtuma

      Oli todella hyvä tilaisuus. Ja EERO. L. Aivan mahtava tyyppi. Veti rennosti ja asiallisesti. Ja yleisöltä hyviä kysymyks
      Ähtäri
      45
      789
    Aihe