CSS Osnove

BACKGROUND

HTML tagovi imaju mogućnost stilizovanja svoje pozadine. To stilizovanje u najvećem broju slučajeva podrazumeva postavljanje boje i/ili jedne ili više slika.

Sintaksa ovog pravila glasi:

background: color position size repeat origin clip attachment image;

color predstavlja boju koju koristimo. Za slučaj da se pored zadate boje u background pravilu definiše i slika, slika će biti postavljena iznad boje.

position definiše poziciju slike.

size definiše da li hoćemo, nezavisno od originalnih dimenzija, da sliku prikažemo u nekoj drugoj veličini.

repeat definiše da li hoćemo da se slika ponavlja po horizontali ili vertikali.

origin definiše da li će slika biti postavljena relativno u odnosu na ceo element, njegov sadržaj ili površinu koja uključuje padding pravilo. Postoje tri moguća scenarija kod ovog svojstva pa ih navodimo u primeru

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 10px solid black;

padding: 35px;

background-image: url(‘smiley.gif’);

background-repeat: no-repeat;

background-position: top left;

}

#div1 {

background-origin: border-box;

}

#div2 {

background-origin:content-box;

}

#div2 {

background-origin:padding-box;

}

</style>

</head>

<body>

<p>background-origin:border-box:</p>

<div id=”div1″>

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.

</div>

<p>background-origin:content-box:</p>

<div id=”div2″>

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.

</div>

<p>background-origin:padding-box:</p>

<div id=”div2″>

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.

</div>

</body>

</html>

CSS-struktura-8

clip definiše isto što i origin ali se primenjuje na boju pozadine ako je ima a ne na sliku

attachment definiše kako se slika pozicionira, fiksno ili se pomera zajedno sa sadržajem elementa pri skrolovanju.

image definiše putanju do slike koja će se koristiti za pozadinu

Primer pozadine definisane za body može da izgleda ovako:

body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}

Izostavljanje nekog parametra ili čak zamena njihovih mesta ne dovodi do greške.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn