tiistai 27. tammikuuta 2015

Postauksen otsikon taakse taustakuva

Tässä postauksessa on ohjeet siihen, miten blogikirjoituksen otsikon taustalle saa taustakuvan. Esimerkki tästä alla:



1. Sulla pitää olla kuva, jonka haluat laittaa postauksen otsikon taustalle. Kivoja kuvia löytyy esimerkiksi Googlen kuvahausta, jota mäkin käytän, vaikka periaatteessa sieltä kuvien kopioiminenhan on laitonta.

2. Kopioi kuvan osoite. Muistakaa, että Photobucketissa osoite kopioidaan kuvan oikealla puolella olevasta boksista klikkaamalla kohtaa Direct.

3. Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

.post-title{
background: url(TÄHÄN TULEE TAUSTAKUVAN OSOITE);
}


4. Valmista tuli! :)

15 kommenttia:

  1. Kiitos tästä(kin) vinkistä, tuli heti käyttöön! Minulla olisi kysymys (ei koske kyseistä postausta): onko sellaista koodia olemassa, joka muuttaisi sivujen muodon. Tarkoitan, että kun minulla on ne eri sivuille vievät linkit siinä ylhäällä, eli ne ovat pyöristettyjä. Mallina on picture window. Olisiko siis mahdollista muuttaa sivujen muotoa?

    VastaaPoista
    Vastaukset
    1. Mukava kuulla :-) En ole aivan varma, ymmärsinkö oikein - tarkoitatkos muodolla sitä, että ne sivut ovat pyöreitä? Olisko sulla vaikka ladata aijaa.comiin kuvaa tästä ongelmasta tai linkittää blogiasi?

      Poista
    2. Tarkoitan siis, että saisko näitä muun muotoisiksi :D

      http://i60.tinypic.com/2uonh9i_th.png

      Poista
    3. Joo, on siis mahdollista tehdä tuollaista jälkeä! Tässä sulle koodi siihen:

      .tabs-inner .widget ul { border-radius: 16px; }

      Poista
  2. Miten tämän kuva höskän saisi gadgettien otsikoiden taakse? Pelkästään.

    VastaaPoista
    Vastaukset
    1. Hi girls! Pelkästään gadgeteiden otsikon taakse taustakuvan saa tällä koodilla:
      .sidebar h2{
      background: url(TÄHÄN TULEE TAUSTAKUVAN OSOITE);
      }

      Poista
  3. Moi, Miten saisin pääkuvasta korkeamman ja sellaisen mikä ei menisi reunasta reunaan? Eli sellaisen kuten teillä ja esim. http://suklaapossu.blogspot.fi/ Tällaista mallia ei taida simple -versioissa olla... Kiitti etukäteen!!

    VastaaPoista
    Vastaukset
    1. Moi! Yksinkertaisesti sillä tavalla, että teet bannerikuvastasi leveydeltään pienemmän kuin mitä blogisi on. Ja keskittäminen auttaa, tässä linkki siihen:
      http://blogikoodeja.blogspot.fi/2013/09/bannerin-keskittaminen.html

      Poista
  4. Miten tätä koodia pitäisi soveltaa, että se taustakuva menisi myös postauksen päivämäärän alle.

    VastaaPoista
    Vastaukset
    1. Moi! Muutat vaan .post-title kohdaksi .date-header eli:
      .date-header{
      background: url(TÄHÄN TULEE TAUSTAKUVAN OSOITE);
      }

      Poista
  5. Miten tätä koodia pitäisi soveltaa, että se taustakuva menisi myös gadgetin otsikon alle?

    VastaaPoista
    Vastaukset
    1. Heippa! Muutat vain .post-titlen tilalle .sidebar h2 { eli koodi näyttäisi tältä:
      .sidebar h2 {
      background: url(TÄHÄN TULEE TAUSTAKUVAN OSOITE);
      }

      Poista
  6. Hei! Miten saisin dadgetteja hiukan alemmas, tai nyt kun on otsikon ja dadgetin otsikon taustoilla kuva, että miten sitten saisin ne samalle tasolle (Että ylimmän dadgetin otsikko etusivulla olisi samalla korkeudella postauksen otsikon kanssa)

    http://gotlostinadream.blogspot.fi/

    VastaaPoista
  7. Niin ja vielä samaan syssyyn, voisiko tätä koodia vielä soveltaa että sivujen taustaksi tulisi myös kuva?

    VastaaPoista

MUISTA LINKATA BLOGISI !! -> näin ongelman ratkominen / auttaminen osaltani onnistuu parhaalla mahdollisella tavalla! :-)