Ozadja (ang. Backgrounds)

Ozadja se uporablja za določanje učinkov ozadja (ang. Background) elementov. Naučili si bomo nekaj primerov iz background-color (slo. Barva Ozadja), background-image (slo. Slika Ozadja), background-repeat (slo. Ponavljajoče Ozadje), background-attachment (slo. Pritrditev Ozadja) in background-position (slo. Položaj Ozadja).

Ozadja (ang. Backgrounds)

V CSS se uporablja funkcija style za spremembo sloga, kamor vpišemo, kako hočemo da element izgleda. Barva ozadja nam ozadje spletne strani obarva po izbiri. Namesto barve ozadja, lahko prilepimo tudi sliko, ki pa se v osnovi ne razširi čez celo stran, ampak se ista slika ponavlja. Ko bomo dodajali slike na spletno stran, moramo paziti na pisavo. Če obiskovalci ne bodo mogli ničesar prebrati, je ne bodo obiskovali.

    
        .slika {
        background-image: url("https://wallpaperaccess.com/full/1558939.jpg");
        background-attachment: fixed;
        margin-left: -60px;
        max-width: 920px;
        max-height: 300px;
        padding: 0px 0px 300px 0px;
        }
    

Preizkus slike!

V načinu background-repeat se pojavi kar nekaj možnosti, med katerimi so revert, inherit, initial, unset enake kot privzeta repeat. Ostale funkcije, repeat (slika se ponavlja), no-repeat (slika se ne ponovi), repeat-x (raztegne se horizontalno), repeat-y (vertikalno), space> isto kot no-repeat, round (več pomanjšanih slik čez cel zaslon). Ker je v privzetem načinu nastavljeno na repeat, bomo v tem primeru pogledali no-repeat. Pojavi se samo ena slika na celi strani, če je manjša bo v privzetem načinu nameščena v zgornji levi kot.

Izbira background-position: right, pomeni, da se bo slika pozicionirala desno zgoraj, background.possition: left pa levo zgoraj. Pri izbiri background-position: unset se slika postavi normalno, kot če bi uporabil no-repeat atribut, kot tudi revert, inherit in initial. Ostal nam je še center, ki sliko postavi v center spletne strani, in pa bottom, ki sliko postavi na dno spletne strani.

Pri uporabi background-attachment sliko prilepimo tako, da se slika na premika ob pomikanju čez spletno mesto.


Primeri ozadja besedila, pisave in drugih elementov:


V prvem primeru sem izbral atribut no-repeat, kar pomeni, da se slika ne ponavlja.


V drugem primeru sem izbral atribut repeat, kar pomeni, da se slika ponavlja.


V tretjem primeru sem izbral atribut repeat, in dodal še background-size: cover; kar pomeni, da se slika razširi če celotno stran, v našem primeru čez <div>.


Sliko lahko uporabimo tudi za druge elemente, kot je to odstavek (ang. Paragraph).

    
    <h4><img src="spletno mesto slike">Dodal sem ikono pred element h4</h4>
    

Dodal sem ikono pred element <h4>

Za vpogled v kodo pritisni F12 za prikaz konzole, in v Elements (Google Chrome) se to lepo vidi.