CSS více pozadí

Obsah

    Zobrazit obsah

V této kapitole se naučíte, jak přidat více obrázků na pozadí k jednomu prvku.

Dozvíte se také o následujících vlastnostech:

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 více pozadí

CSS umožňuje přidat více obrázků na pozadí pro prvek prostřednictvím vlastnost obrázek na pozadí.

Různé obrázky na pozadí jsou odděleny čárkami a obrázky jsou naskládané na sebe, kde je první obrázek divákovi nejblíže.

Následující příklad má dva obrázky na pozadí, první obrázek je květina (zarovnáno dolů a doprava) a druhý obrázek je papírové pozadí (zarovnáno do levého horního rohu):

Příklad

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

Zkuste to sami →

<!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>

Více obrázků na pozadí lze zadat buď pomocí jednotlivce vlastnosti pozadí (jako výše) nebo zkrácená vlastnost pozadí.

Následující příklad používá zkrácenou vlastnost background (stejný výsledek jako příklad výše):

Příklad

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

Zkuste to sami →

<!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>

Velikost pozadí CSS

Vlastnost CSS background-size umožňuje určit velikost obrázků na pozadí.

Velikost lze zadat v délkách, procentech nebo pomocí jednoho z těchto dvou klíčová slova: obsahovat nebo zakrýt.

Následující příklad změní velikost obrázku na pozadí na mnohem menší než původní obrázek (pomocí pixelů):

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.

Zde je kód:

Příklad

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

Zkuste to sami →

<!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>

Další dvě možné hodnoty pro velikost pozadí jsou

contain
cover

Klíčové slovo contain upraví velikost obrázku na pozadí tak, aby byl co největší (jeho šířka i výška se však musí vejít do oblasti obsahu). Jako takové, v závislosti na proporcích pozadí obrázku a oblasti umístění pozadí, mohou existovat některé oblasti pozadí, které není zakryto obrázkem na pozadí.

Klíčové slovo obálka změní velikost obrázku na pozadí tak, aby byla oblast obsahu upravena zcela zakrytý obrázkem na pozadí (jeho šířka i výška se rovnají nebo přesahovat oblast obsahu). Některé části obrázku na pozadí tak nemusí být viditelné v oblasti polohování pozadí.

Následující příklad ilustruje použití contain a cover:

Příklad

  #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;
}

Zkuste to sami →

<!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>

Definujte velikosti více obrázků na pozadí

Vlastnost background-size také přijímá více hodnot pro velikost pozadí (pomocí seznamu odděleného čárkami), při práci s více pozadími.

V následujícím příkladu jsou specifikovány tři obrázky pozadí s různými hodnota velikosti pozadí pro každý obrázek:

Příklad

  #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;
}

Zkuste to sami →

<!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>

Obrázek na pozadí v plné velikosti

Nyní chceme mít na webu obrázek na pozadí, který pokrývá celý okno prohlížeče za všech okolností.

Požadavky jsou následující:

  • Vyplňte celou stránku obrázkem (bez mezer)

  • Změňte velikost obrázku podle potřeby

  • Obrázek uprostřed stránky

  • Nevytvářejte posuvníky

Následující příklad ukazuje, jak to udělat; Použijte prvek <html> (prvek <html> má vždy alespoň výšku okna prohlížeče). Poté na něj nastavte pevné a vycentrované pozadí. Poté upravte jeho velikost pomocí vlastnost velikosti pozadí:

Příklad

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

Zkuste to sami →

<!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>

Obrázek hrdiny

Můžete také použít různé vlastnosti pozadí na <div> k vytvoření obrázku hrdiny (velký obrázek s textem) a umístit jej na požadované místo.

Příklad

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

Zkuste to sami →

<!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>

Vlastnost CSS pozadí

Vlastnost CSS background-origin určuje, kde je obrázek na pozadí umístěno.

Vlastnost nabývá tří různých hodnot:

  • border-box - obrázek na pozadí začíná od levého horního rohu okraje

  • padding-box - (výchozí) obrázek na pozadí začíná od levého horního rohu okraje výplně

  • content-box - obrázek na pozadí začíná od levého horního rohu obsahu

Následující příklad ilustruje vlastnost background-origin:

Příklad

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

Zkuste to sami →

<!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>

Vlastnost klipu pozadí CSS

Vlastnost CSS background-clip určuje oblast malování pozadí.

Vlastnost nabývá tří různých hodnot:

  • border-box - (výchozí) pozadí je namalováno k vnějšímu okraji okraje

  • vycpávka - pozadí je namalováno k vnějšímu okraji vycpávky

  • content-box - pozadí je namalováno uvnitř obsahového pole

Následující příklad ilustruje vlastnost background-clip:

Příklad

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

Zkuste to sami →

<!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>

Pokročilé vlastnosti pozadí CSS

background

Zkrácená vlastnost pro nastavení všech vlastností pozadí v jedné deklaraci

background-clip

Určuje oblast malby pozadí

background-image

Určuje jeden nebo více obrázků pozadí pro prvek

background-origin

Určuje, kde je/jsou umístěny obrázky na pozadí

background-size

Určuje velikost obrázku (obrázků) na pozadí