Dodavanje pozadinske slike na web stranicu može dodati vizualni interes i dopuniti dizajn. Evo kako to možete učiniti:
Korištenje CSS-a za dodavanje pozadinske slike
Priprema slike: Prvo pripremite sliku koju želite postaviti kao pozadinu. Idealno je da bude dovoljno velika kako bi pokrila cijelu površinu stranice.
Odabir elementa: Odaberite HTML element kojem želite dodati pozadinsku sliku. To može biti cijela stranica (body element), određeni kontejner (div) ili neki drugi element.
Dodavanje CSS-a: Upotrijebite CSS svojstvo background-image kako biste postavili pozadinsku sliku. Primjer koda za postavljanje pozadinske slike na cijelu stranicu (body element):
body {
background-image: url('putanja/do/slike.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Dodavanje pozadinske slike kroz HTML
Priprema slike: I dalje trebate pripremiti sliku koju želite koristiti kao pozadinu.
Dodavanje HTML atributa: U HTML-u možete direktno dodati atribut style u elementu kojem želite postaviti pozadinsku sliku. Primjer za postavljanje pozadinske slike na cijelu stranicu:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('putanja/do/slike.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- Vaš sadržaj ovdje -->
</body>
</html>
Korištenje CSS-a za određeni element
Ako želite postaviti pozadinsku sliku samo na određeni element (npr. div), koristite isti pristup kao u prvom primjeru, ali primijenite CSS na taj element.
Ovi primjeri koriste osnovne stilove za postavljanje pozadinske slike. Također možete prilagoditi dodatne CSS svojstva kao što su boje, veličina, pozicija i ponavljanje kako biste postigli željeni izgled.
Prije primjene, provjerite veličinu slike i prilagodite svojstva kako bi slika bila optimalno prikazana na različitim uređajima.