CSS-opas, CSS - Taustat

Mistä taustassa on kyse

CSS-muotoilulla voidaan asettaa www-sivulle erilaisia taustoja. Taustana voi olla esimerkiksi väri, kuva tai kuva toistettuna.

Tausta voidaan asettaa esimerkiksi seuraaville:



Esimerkki on toteutettu iframe-elementtiin avatulla html-tiedostolla, jossa on tekstiä sekä taustakuva.


Esimerkin (yllä) koodaus kokonaisuudessaan: 

  <!DOCTYPE html>
  <html> 
  <head>    
    <meta charset="UTF-8">
    <style>
     .keskitys {
       color: green;
	   font-family:"Times New Roman", Times, serif;
	   padding-left:100px;
	 } 
	 body {
	   background-image:url("tribal.jpg");
	   background-repeat:no-repeat;
	 }
    </style>
   </head>
   <body>
     <h3 class="keskitys"> Tällä sivulla käsitellään: </h3> 
     <p class="keskitys"> background-color<br>
	                      background-image<br>
						  background-repeat<br> 
						  background-attachment<br>
						  background-position </p>
   </body>
  </html>
Seuraavassa esimerkissä lisätty tekstiosalle taustaväri, jolloin kuvan leveys hahmottuu.
Taustaväri on tehty lisäämällä body-muotoiluun ohje background-color:#C4F21D; :

Taulukossa taustaan littyviä atribuutteja ja määritteitä:

Atribuutti Tarkoitus Määritteet
background Kun elementille asetetaan yhdellä asetuksella tai samalla ohjeella kaikki ominaisuudet (tämän taulukon kaikki määritelmät) (1. esimerkki taulukon jälkeen)
background-attachmentTaustakuvan vierittämisen liittyvät asetukset scroll - taustakuva liikkuu mukana kun sivua vieritetään
fixed - tausta kuva pysyy paikallaan, muu sisältö liikkuu
inhert - periytyy ympäröivältä elementiltä
background-color Taustavärin asetukset Kaikki kelvolliset CSS-väriastukset
background-clip Määrittää alueen jolle tausta asetetaan (katso esimerkki) border-box - viivan ulkoreunaan asti
padding-box - viivan sisäreunaan asti
content-box - sisällön ulkoreunaan asti
background-image Kuvan ja sen ominaisuudet url - kuvan tallennuspaikka ja kuvatiedoston nimi
linear-gradient(väri1, väri2, väri3) - liukuväri (ylhäältä alas)
radial-gradient(väri1, väri2, väri3) - liukuväri (keskeltä ulkoreunoille)
repeating-radial-linear(väri1, väri2 XX%, väri3 XX%) - toistettava liukuväri (ylhäältä alas)
repeating-radial-gradient(väri1, väri2 XX%, väri3 XX%) - toistettava liukuväri (keskeltä reunoille)
initial - asetuksella ohitetaan CSS-muotoilu elementissä johon asetus kohdistetaan
inherit - asetuksella voidaan antaa paikallinen muotoiluohje
background-origin Taustakuvan sijoittuminen elementiin (katso box-model) padding-box - elementin sisällä täytteen ulkoreunaan (vasemmalta ylhäältä)
border-box - elementin sisällä ulkoreuna-viivaan (kuten edellä)
content-box - elementin sisällä täytteen ulkoreunaan (kuten edellä)
initial - asetuksella ohitetaan CSS-muotoilu elementissä johon asetus kohdistetaan
inherit - asetuksella voidaan antaa paikallinen muotoiluohje
background-position Taustakuvan sijoittaminen left top - asetuksilla sijoittaminen jonnekin www-sivun kohtaan
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
X% Y% - prosenttilukujen avulla vasemmasta yläkulmasta, joka on 0% 0%
Xpos Ypos - pikseliarvojen avulla vasemmasta yläkulmasta, joka on 0pos 0pos
initial - asetuksella ohitetaan CSS-muotoilu elementissä johon asetus kohdistetaan
inherit - asetuksella voidaan antaa paikallinen muotoiluohje
background-repeat Taustakuvan toistamisen asetukset repeat - toistaa kuvaa koko alueelle jolle tausta laitetaan
repeat-x - toistaa taustakuvan vaakasuuntaan koko leveydelle verran
repeat-y - toistaa taustakuvan pystysuuntaan koko korkeuden verran
no-repeat - astettaa taustakuvan mutta ei toista sitä mihinkään suuntaan
space - toistaa taustakuvaa käytettävissä olevaan tilaan, jättää väleihin tyhjää tilaa (kokonaisina kuvina)
round - toistaa taustakuvaa käytettävissä olevaan tilaan, kuvan kiinni toisissaan (kokonaisina kuvina)
initial - toistaa taustakuvaan käytettävissä olevaan tilaan, katkaisee kuvat oikealta ja alhaalta
inherit - asetuksella voidaan antaa paikallinen muotoiluohje
background-size Taustakuvan koko auto - taustakuvan koko säätyy automaattisesti
length - taustakuvan koko antamalla leveys pikseleinä
percentage - taustakuvan koko antamalla leveys prosenttilukuna
cover - taustakuvalla peitetään käytettävissä oleva tila
contain - taustakuva esitetään aidossa koossa (kuva näkyy kokonaan tai osittain)
initial - asetuksella ohitetaan CSS-muotoilu elementissä johon asetus kohdistetaan
inherit - asetuksella voidaan antaa paikallinen muotoiluohje


Määritelmällä background voidaan asettaa useita asetuksia kerralla:


  CSS-ohje:
  
    body {
      background-color:"#b0c4de";
      background-image:"none";
      background-repeat:"repeat";
      background-attachement:"scroll";
      background-position:"0% 0%";
    }
   
   voidaan tehdä myös näin:
   
    body {
      background:"#b0c4de; none; repeat; scroll; 0% 0%";
    }

Taustaväri

Taustaväri asetetaan background-color-määritteellä ja asetuksena annetaan väri.


  CSS-ohje:
  
  .keskitys {
     text-align: center;
	 color: blue;
  } 
  body {
	 background:#C4F21D;
  }
   
   HTML-osissa:
   
   body-ohje koskee www-sivun taustaa eli body-elementtiä ja keskitys-ohje liitetään seuraavasti.
   
  <h3 class="keskitys"> CSS-muotoiluja </h3> 
  <p class="keskitys"> Taustavärin asettaminen body-elementille. </p>


Tausta väri voidaan asettaa esimerkiksi:


Taustaväriin liittyviä kikkoja voi toteutaa seuraavasti:
Asetus EsimerkkiAsetus Esimerkki
linear-gradient(green, yellow, blue)
radial-gradient(yellow,orange,red,)
repeating-linear-gradient(red, yellow 10%, green 20%)
repeating-radial-gradient(blue, yellow 10%, green 15%)

Taulukon esimerkkikoodaus ja muotoilu:


  CSS-ohje:
  
  #muoto1 {
    height: 100px;
    background-image: linear-gradient(green, yellow, blue);
  }
  
  
  HTML-koodauksessa:
  <div id="muoto1"> </div>

Taustakuva

Taustakuvien asettamisessa on useita vaihtoehtoja, kuva asetetaan background-image-määritteellä ja lisämääritteillä vaikutetaan kuvan käyttäytymiseen.

Taustakuvia voidaan sijoittaa päällekkäin käytettäessä taustattomia gif-kuvia.
Esimerkissä www-sivun taustalle (body-elementti) toistetaan kuva ja sen päälle gif-animaatio: 


  CSS-ohje:
  
  body {
      background-image: url("haikala.gif"), url("haitausta.gif");
      background-repeat: no-repeat, repeat;
      background-color: #cccccc;
  }
  
  (hai-animaatio lähde: http://www.gifs-paradise.com/sharks/)


Taustakuvan aloituskohta, sijoittaminen background-orgin-määritteellä:

background-origin: padding-box;

Vihreä teksti

Taustakuva tuplaviivan sisemmän viivan reunassa.

background-origin: border-box;

Tummanpunainen teksti

Taustakuva tuplaviivan ulomman viivan reunassa.

background-origin: content-box,

Sininen teksti

Taustakuva alkaa sisältönä olevan tekstin reunasta.


Esimerkkien (yllä) CSS-muotoilut jaHTML-koodaus: 


  CSS-ohjeet:
  
  #taka1 {
    border: 10px double green;
    color:green;
    padding: 25px;
    background: url(tikru1.jpg);
    background-repeat: no-repeat;
    background-origin: padding-box;
  }

  #taka2 {
    border: 10px double red;
    color:darkred;
    padding: 25px;
    background: url(tikru1.jpg);
    background-repeat: no-repeat;
    background-origin: border-box;
  }

  #taka3 {
    border: 10px double blue;
    color:blue;
    padding: 25px;
    background: url(tikru1.jpg);
    background-repeat: no-repeat;
    background-origin: content-box;
  }
  
  
  HTML-koodaus:
  
  <h3>background-origin: padding-box;</h3>
  <div id="taka1">
   <h2>Vihreä teksti</h2>
   <p>Taustakuva tuplaviivan sisemmän viivan reunassa.</p>
  </div>

  <h3>background-origin: border-box;</h3>
   <div id="taka2">
   <h2>Tummanpunainen teksti</h2>
   <p>Taustakuva tuplaviivan ulomman viivan reunassa.</p>
  </div>

  <h3>background-origin: content-box,</h3>
  <div id="taka3">
   <h2>Sininen teksti</h2>
   <p>Taustakuva alkaa sisältönä olevan tekstin reunasta.</p>
  </div>

Taustakuvan toistaminen

Taustakuvan toistaminen voidaan toteuttaa X tai Y suuntaan. Taustakuvana voidaan käyttää pientä kuvaa, jonka etuna on pienempi tilan tarve talletuspaikassa. Taustaksi toistettavan kuvan valinnassa on syytä olla huolellinen ettei pilaa sivuston ulkonäköä.
Esimerkeissä toistetaan X-suuntaan www-sivun taustaksi kuva, 1. on huono taustakuva ja 2. hiukan parempi: 


  CSS-ohje:
  
   body{
    background-image:url("taustatoisto.png");
    background-repeat:repeat-x;
   }

1. Huono valinta taustaluvaksi.

2. Parempi valinta taustaluvaksi.


Taustakuvan asemonti, sijainti www-sivulla

Taustakuvan asemointiin käytetään background-position-määritettä. Esimerkissä sijoitetaan kuva prosenttiluvuilla. 


   <!DOCTYPE html>
   <html>
   <head>
    <style>
     .keskitys {
      color: green;
      font-family:"Times New Roman", Times, serif;
      padding-left:100px;
     } 
     body {
      background-image:url("tribal.jpg");
      background-repeat:no-repeat;
      background-position:50% 100%;  /*taustakuvan sijoitus % -luvuilla*/
     }
    </style>
    <meta charset="UTF-8">
   </head>
   <body>
     <h3 class="keskitys"> Tällä sivulla käsitellään: </h3>
     <p class="keskitys"> background-color<br>
      background-image<br>
      background-repeat<br>
      background-attachment<br>
      background-position 
     </p>
   </body>
   </html>


Taustakuvan liikkuminen

Taustakuva voidaan asettaa paikallaan pysymään tai liikkumaan sisällön mukana kun sivua liikutetaan ylös tai alas background-attachment määrityksen avulla, alla asetukset:

Asetukset Tarkoitus
scroll Taustakuva "kiinnitetty" paikoilleen suhteessa muihin www-sivulla oleviin elementteihin, eli taustakuva liikkuu sivulla kaikkien muiden mukana.
fixed Taustakuva pysyy paikoillaan kun muu www-sivun sisältö liikkuu.
local Taustakuva liikkuu muun sisällön mukana (?).
initial Kuvaperii sijaintinsa (??)
inherit Kuva sijoittuu kuvaa ympäröivälle elementille asetettujen arvojen perusteella, eli kuva perii sijaintinsa siltä elementiltä johon kuva on sijoitettu.

Esimerkissä alla, toteutetaan www-sivulle taustakuva (tribal.jbg) joka pysyy paikoillaan kun sivulla oleva teksti teksti liikkuu (reunan palkista):


   <!DOCTYPE html>
   <html>
   <head>
    <style>
     .keskitys {
      color: green;
      font-family:"Times New Roman", Times, serif;
      padding-left:100px;
     } 
     body {
      background-image:url("tribal.jpg");
      background-repeat:no-repeat;
      background-position:50% 100%;
      background-attachment:fixed; /*asetus jolla kuva pysyy paikoillaan*/
     }
    </style>
    <meta charset="UTF-8">
   </head>
   <body>
     <h3 class="keskitys"> Tällä sivulla käsitellään: </h3>
     <p class="keskitys"> background-color<br>
      background-attachment<br>
      background-attachment<br>
      background-attachment<br>
      background-attachment<br>
      background-attachment<br>
      background-attachment<br>
      background-attachment<br>
      background-attachment<br>
      background-attachment<br>
      background-attachment<br>
      background-attachment<br>
      background-attachment<br>
     </p>
   </body>
   </html>


Seuraavassa taulukossa käytetään background-blend-mode määritettä erilaisilla asetuksilla, tekniikassa yhdistetään taustaväri ja kuva.

Asetus EsimerkkiAsetus Esimerkki
normal
multiply
screen
overlay
darken
lighten
color-dodge
 saturation
color
luminosity

Taulukossa olevien esimerkkien CSS-ohjeen rakenne ja liittäminen html-koodauksessa:


  CSS-ohje:
  
  #vari2 {
    width: 200px;
    height: 200px;
    background-size: 200px 200px;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right,yellow 0%,red 100%),url('coctail.jpg');
    background-blend-mode:multiply;
  }
  
  Liittäminen HTML-koodauksessa:
  <div id="vari2"> </div>
  
  
  Ilman värin käyttämistä taustakuvan päälle CSS-ohje (esimerkki):
  
  #omaDIV { 
    width: 400px;
    height: 400px;
    background-repeat: no-repeat, repeat;
    background-image: url("kuvasivulle.gif"), url("taustakuva.gif");
    background-blend-mode: luminosity;
  }


Taustakuvan sijainti voidaan määritellä background-position-määritteen asetuksilla. Taustakuva voidaan sijoittaa www-sivun taustalle, "box-model" asetuksilla luotuun laatikkoon tai esimerkkien mukaisesti taulukoonkin:

Asetus EsimerkkiAsetus Esimerkki
background-position:left top;
background-position:left center;
background-position:left bottom;
background-position:right top;
background-position:right center;
background-position:right bottom;
background-position:center top;
background-position:center center;
background-position:center bottom
background-position:50% 50%;
background-position:25% 75%;
background-position:10px 150px;
background-position:50px 50px;
background-position:initial;

Yllä taulukoon sovellettu seuraavaa CSS-esimerkkiä:


  CSS-ohje:
  
  #sija7 {
	width: 200px;
    height: 200px;
    background-image:url('tikru2p.jpg');
    background-repeat:no-repeat;
    background-position:center top;
  }
  
  Liittäminen HTML-koodauksessa:
  <div id="sija7"> </div>


Kikkoja

Kikkoija esitellään joitain sivulla esitettyihin muotoiluihin liittyviä sovelluksia.

Taustan värin muuttaminen kun hiiren osoitin on kuvan kohdalla:

Toteutus: 


  CSS-ohje:
  
  #pain1 {
    width: 200px;
    height: 200px;
    background-size: 200px 200px;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right,yellow 0%,red 100%),url('coctail.jpg');
    background-blend-mode:multiply;
    border: 1px solid green;
    padding: 1px;
    margin: 10px;
  }
  #pain1:hover {
    width: 200px;
    height: 200px;
    background-size: 200px 200px;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right,yellow 0%,red 100%),url('coctail.jpg');
    background-blend-mode:lighten;
    border: 2px solid hotpink;
	box-shadow: 10px 10px 5px pink;
    padding: 1px;
    margin: 10px;
  }
  
  Liittäminen HTML-koodauksessa www-sivulle:
  <div id="pain1"> </div>

Design and edit © player