CSS Ozadja: Barve, Slike, Gradienti in Pozicioniranje

CSS lastnosti za ozadja omogočajo popoln nadzor nad videzom HTML elementov. Z njimi lahko nastavimo barvo ozadja, dodamo slike, določimo njihovo pozicijo, velikost, način ponavljanja in celo ustvarimo napredne gradientne prehode. Lastnost background je skrajšana oblika (shorthand) za hkratno nastavitev vseh posameznih lastnosti ozadja v eni vrstici kode.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>CSS Background Primeri</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        .vsebovalnik {
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }

        /* Primer z barvo ozadja */
        .primer-barva {
            background-color: #e3f2fd;
            color: #333333 !important;
            padding: 15px;
            margin-bottom: 10px;
            -webkit-text-fill-color: #333333 !important;
        }

        /* Primer s sliko ozadja */
        .primer-slika {
            background-image: url("img/narava3.png");
            background-repeat: no-repeat;
            background-size: cover;
            padding: 20px;
            margin-bottom: 10px;
            min-height: 200px;
            color: white !important;
            text-shadow: 1px 1px 2px black;
            -webkit-text-fill-color: white !important;
        }

        /* Primer z gradientom */
        .primer-gradient {
            background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
            color: #333333 !important;
            padding: 15px;
            margin-bottom: 10px;
            -webkit-text-fill-color: #333333 !important;
        }

        /* Primer s fiksnim ozadjem */
        .primer-fixed {
            background-image: url("img/narava1.png");
            background-attachment: fixed;
            background-position: center;
            background-size: cover;
            height: 200px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white !important;
            text-shadow: 2px 2px 4px black;
            -webkit-text-fill-color: white !important;
        }

        /* Primer z večkratnim ozadjem */
        .primer-multi {
            background-image: url("img/narava2.png"), linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
            background-blend-mode: overlay;
            background-position: center;
            background-size: cover;
            padding: 15px;
            color: white !important;
            text-shadow: 1px 1px 2px black;
            min-height: 150px;
            -webkit-text-fill-color: white !important;
        }
    </style>
</head>
<body>
    <div class="vsebovalnik">
        <div class="primer-barva">
            <h2>Barva ozadja</h2>
            <p>Primer enostavne barve ozadja z uporabo background-color.</p>
        </div>

        <div class="primer-slika">
            <h2>Slika ozadja</h2>
            <p>Primer slike iz narave kot ozadja s cover velikostjo.</p>
        </div>

        <div class="primer-gradient">
            <h2>Gradient ozadje</h2>
            <p>Primer linearnega gradienta kot ozadja.</p>
        </div>

        <div class="primer-fixed">
            <h2>Fiksno ozadje</h2>
        </div>

        <div class="primer-multi">
            <h2>Večplastno ozadje</h2>
            <p>Primer kombinacije slike in gradient prekrivanja.</p>
        </div>
    </div>
</body>
</html>

REZULTAT

Lastnost	Primer	Opis
Osnovne lastnosti
`background`	`background: #fff url(img.jpg) no-repeat center;`	Skrajšana lastnost za vse lastnosti ozadja hkrati
`background-color`	`background-color: #f0f0f0;`	Določi barvo ozadja elementa
`background-image`	`background-image: url("image.jpg");`	Določi sliko kot ozadje elementa
Pozicija in Ponovitev
`background-position`	`background-position: center top;`	Določi začetni položaj slike ozadja
`background-repeat`	`background-repeat: no-repeat;`	Ponavlja sliko (repeat, no-repeat, repeat-x, repeat-y)
`background-size`	`background-size: cover;`	Določi velikost slike ozadja (cover, contain, px, %)
Pripetost in Območje
`background-attachment`	`background-attachment: fixed;`	Določi ali je slika ozadja pomična ali fiksna
`background-origin`	`background-origin: padding-box;`	Določi položaj izvora slike (border-box, padding-box, content-box)
`background-clip`	`background-clip: border-box;`	Določi, kako daleč sega ozadje (border-box, padding-box, content-box)
Gradienti
`linear-gradient`	`background: linear-gradient(to right, red, blue);`	Linearni gradient (od enega roba do drugega)
`radial-gradient`	`background: radial-gradient(circle, red, blue);`	Radialni gradient (od središča navzven)
Napredno
`background-blend-mode`	`background-blend-mode: multiply;`	Meša več ozadij (barva + slika + gradient)
`multiple backgrounds`	`background: url(a.jpg), url(b.jpg);`	Več ozadij hkrati (zložena eno nad drugo)

CSS Ozadja: Barve, Slike, Gradienti in Pozicioniranje

Vadnica.org

Povezave

Podpora