CSS useita taustoja


Sisällysluettelo

    Näytä sisällysluettelo

Tässä luvussa opit lisäämään useita taustakuvia yhteen elementtiin.

Saat myös tietoa seuraavista ominaisuuksista:

background-size
background-origin
background-clip

In this chapter you will learn how to add multiple background images to one element.

You will also learn about the following properties:

  • background-size
  • background-origin
  • background-clip

CSS useita taustoja

CSS:n avulla voit lisätä elementille useita taustakuvia taustakuva-ominaisuus.

Eri taustakuvat erotetaan toisistaan pilkuilla, ja kuvat ovat pinottuna päällekkäin, missä ensimmäinen kuva on lähinnä katsojaa.

Seuraavassa esimerkissä on kaksi taustakuvaa, joista ensimmäinen on kukka (tasattu ala- ja oikealle) ja toinen kuva on paperitausta (tasattu vasempaan yläkulmaan):

Esimerkki

  #example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
} 

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>


Useita taustakuvia voidaan määrittää käyttämällä joko yksittäistä taustaominaisuudet (kuten yllä) tai tausta-ominaisuus.

Seuraava esimerkki käyttää tausta-ominaisuutta (sama tulos kuin esimerkki yllä):

Esimerkki

  #example1 {
  background: url(img_flwr.gif) right bottom 
no-repeat, url(paper.gif) left top repeat;
} 

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  padding: 15px;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>




CSS-taustakoko

CSS-ominaisuuden background-size avulla voit määrittää taustakuvien koon.

Koko voidaan määrittää pituuksina, prosentteina tai käyttämällä jompaakumpaa näistä kahdesta avainsanat: sisältää tai peittää.

Seuraava esimerkki muuttaa taustakuvan koon paljon pienemmäksi kuin alkuperäinen kuva (käyttämällä pikseleitä):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Tässä on koodi:

Esimerkki

#div1
{
   
background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 1px solid black;
  background: url(img_flwr.gif);
  background-size: 100px 80px;
  background-repeat: no-repeat;
  padding: 15px;
}

#example2 {
  border: 1px solid black;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>The background-size Property</h1>

<p>Resized background-image:</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>Original size of the background-image:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>


Kaksi muuta mahdollista arvoa background-size-arvolle ovat

contain
cover

Avainsana contain skaalaa taustakuvan mahdollisimman suureksi (mutta sekä sen leveyden että korkeuden on mahduttava sisältöalueen sisälle). Sellaisenaan taustan mittasuhteista riippuen kuva ja taustan sijaintialue, voi olla joitain alueita tausta, jota taustakuva ei kata.

Avainsana cover skaalaa taustakuvan niin, että sisältöalue on kokonaan taustakuvan peittämä (sekä sen leveys että korkeus ovat yhtä suuria tai ylittää sisältöalueen). Sellaisenaan jotkin taustakuvan osat eivät ehkä ole näkyy taustalla paikannusalueella.

Seuraava esimerkki havainnollistaa contain- ja cover-komentojen käyttöä:

Esimerkki

  #div1
{
    
background: url(img_flower.jpg);
    
background-size: contain;
  background-repeat: no-repeat;
}
#div2
{
    
background: url(img_flower.jpg);
    
background-size: cover;	background-repeat: no-repeat;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: contain;
}

.div2 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: cover;
}

.div3 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>The background-size Property</h1>

<h2>background-size: contain:</h2>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>background-size: cover:</h2>
<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>No background-size defined:</h2>
<div class="div3">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<p>Original image:</p>
<img src="img_flwr.gif" alt="Flowers" width="224" height="162">

</body>
</html>



Määritä useiden taustakuvien koot

Ominaisuus background-size hyväksyy myös useita taustakoon arvoja (käyttäen pilkuilla eroteltua luetteloa), kun työskentelet useiden taustojen kanssa.

Seuraavassa esimerkissä on määritetty kolme eri taustakuvaa taustakoon arvo jokaiselle kuvalle:

Esimerkki

  #example1 {
  background: url(img_tree.gif) left top 
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top 
repeat;
  background-size: 50px, 130px, auto;
} 

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  padding: 15px;
  background-size: 50px, 130px, auto;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>



Täysikokoinen taustakuva

Nyt haluamme taustakuvan verkkosivustolle, joka kattaa koko selainikkuna aina.

Vaatimukset ovat seuraavat:

  • Täytä koko sivu kuvalla (ei välilyöntejä)

  • Skaalaa kuvaa tarpeen mukaan

  • Keskimmäinen kuva sivulla

  • Älä aiheuta vierityspalkkeja

Seuraava esimerkki näyttää kuinka se tehdään; Käytä <html>-elementtiä (<html>-elementti on aina vähintään selainikkunan korkeus). Aseta sitten kiinteä ja keskitetty tausta sille. Säädä sitten sen kokoa taustan koon ominaisuus:

Esimerkki

  html {
  background: url(img_man.jpg) no-repeat 
center fixed; 
  background-size: cover;
} 

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style> 
html { 
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

body { 
  color: white; 
}
</style>
</head>
<body>

<h1>Full Page Background Image</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>



Sankarin kuva

Voit myös käyttää <div>:n taustaominaisuuksia luodaksesi sankarikuvan (suuri kuva tekstillä) ja sijoittaa sen haluamaasi paikkaan.

Esimerkki

  .hero-image {
  background: url(img_man.jpg) no-repeat center; 
  
   background-size: cover;
  height: 500px;
  position: 
   relative;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
</style>
</head>
<body>

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">I am John Doe</h1>
    <h3>And I'm a Photographer</h3>
    <button>Hire me</button>
  </div>
</div>

<p>Page content..</p>
<p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p>

</body>
</html>



CSS-taustaalkuperäinen omaisuus

CSS:n background-origin-ominaisuus määrittää, missä taustakuva on sijoitettu.

Omaisuus saa kolme eri arvoa:

  • border-box - taustakuva alkaa reunan vasemmasta yläkulmasta

  • padding-box - (oletus) taustakuva alkaa täytereunan vasemmasta yläkulmasta

  • content-box - taustakuva alkaa sisällön vasemmasta yläkulmasta

Seuraava esimerkki havainnollistaa ominaisuutta background-origin:

Esimerkki

 #example1
{
    border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
    
background-repeat: no-repeat;
  
background-origin: content-box;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
}

#example2 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: border-box;
}

#example3 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}
</style>
</head>
<body>

<h1>The background-origin Property</h1>

<p>No background-origin (padding-box is default):</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div id="example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>



CSS-taustaleikkeen ominaisuus

CSS-ominaisuus background-clip määrittää taustan maalausalueen.

Omaisuus saa kolme eri arvoa:

  • border-box - (oletus) tausta maalataan reunan ulkoreunaan asti

  • pehmustelaatikko - tausta on maalattu pehmusteen ulkoreunaan

  • content-box - tausta maalataan sisältölaatikon sisään

Seuraava esimerkki havainnollistaa ominaisuutta background-clip:

Esimerkki

  #example1
{
     border: 10px dotted black;
  
padding: 35px;
  background: yellow;
  
background-clip: content-box;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
}

#example2 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: padding-box;
}

#example3 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}
</style>
</head>
<body>

<h1>The background-clip Property</h1>

<p>No background-clip (border-box is default):</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>




CSS:n lisätaustaominaisuudet

background

Lyhytmuotoinen ominaisuus kaikkien taustaominaisuuksien asettamiseen yhdessä ilmoituksessa

background-clip

Määrittää taustan maalausalueen

background-image

Määrittää elementille yhden tai useamman taustakuvan

background-origin

Määrittää, missä taustakuva(t) sijoitetaan

background-size

Määrittää taustakuvien koon