Úvod

Velikost obrázku na pozadí můžeme určit pomocí vlastnosti background-size. Můžeme udělat obrázek jako levý, roztažený a přizpůsobený dostupnému prostoru. Existuje tolik syntaxí pro implementaci vlastnosti background-size. Vlastnost vlastnosti background-size můžeme nastavit pomocí hodnot a jednotkových hodnot.

V jednotkových hodnotách můžeme definovat vlastnost background-size ve formě procent nebo pixelů. Můžeme ji definovat také pomocí globální hodnoty. Můžeme to implementovat s pomocí globální hodnoty pomocí níže uvedeného úryvku.

faktoriál v c

 .card-hero inherit 

Pojďme krátce pochopit téma.

Hodnoty klíčových slov

Hodnotu klíčového slova můžeme použít pomocí cover a include. Pomocí těchto hodnot klíčových slov můžeme změnit velikost pozadí.

1. Kryt:

Velikost pozadí můžeme nastavit pomocí klíčového slova cover. Pokud definujeme velikost pozadí jako obal, pak se obrázek vejde do kontejneru, aniž by zanechal jakýkoli prostor. Také vylepší obraz tak, aby se vešel na obrazovku.

Pojďme to pochopit pomocí níže uvedeného příkladu.

příkaz java

Příklad 1:

Kód:

 Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url(&apos;https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp&apos;); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> 

Výstup

Vysvětlení:

Ve výše uvedeném kódu jsou tři obrázky na pozadí zkombinovány pomocí vlastnosti background-image. Vlastnost background-size určuje velikosti pro každý obrázek na pozadí: 30 % šířka pro první obrázek, 40 % šířka pro druhý obrázek a obal pro třetí obrázek. Vlastnost background-position je pro každý obrázek nastavena jinak, aby se vytvořila vyvážená kompozice.