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: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):
#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ä):
#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-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 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:
#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öä:
#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>
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:
#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>
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:
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>
Voit myös käyttää <div>:n taustaominaisuuksia luodaksesi sankarikuvan (suuri kuva tekstillä) ja sijoittaa sen haluamaasi paikkaan.
.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: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
:
#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-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
:
#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>
Lyhytmuotoinen ominaisuus kaikkien taustaominaisuuksien asettamiseen yhdessä ilmoituksessa
Määrittää taustan maalausalueen
Määrittää elementille yhden tai useamman taustakuvan
Määrittää, missä taustakuva(t) sijoitetaan
Määrittää taustakuvien koon