Background CSS : ecco il codice

Background CSS

una guida rapida su come creare questo effetto tramite foglio di stile CSS

I fogli di stile o CCS sono ormai nell’ordine del giorno, e sapersi destreggiare è compito non sempre facile.

background css  con i foglio di stile e semplice

background css con i foglio di stile e semplice

Avere dimestichezza con i CSS è un pregio che si acquisisce col tempo, con l’uso, e con la passione.

Con pochi tag nel codice html e con l’aggiunta di poche classi di CSS è possibile nel vero senso della parola, creare, diversi layout di un sito web, senza dover poi toccare nuovamente il codice madre html del sito.

Oggi vedremo come creare uno sfondo tramite l’istruzione background in una classe css.

Prima di tutto i fogli di stili possono essere richiamati direttamente nel codice html con i tag <style>…. </style> oppure possono essere associati in una pagina web con la riga di codice <link rel=”stylesheethref=”{link al file css}” />.

In entrambi i casi potremmo avere un esempio del genere:

.nomeclasse{….}  in questo modo si identifica una classe in css, praticamente inizia sempre con un “punto” iniziale, importante è che sia successivamente definita una parola unica senza spazi ne caratteri speciali e/o accentati.

All’interno delle parentesi graffe ci saranno poi le nostre istruzioni per quella classe.

Nel nostro post dedicato al “background css” faremo capire come creare un colore di background o uno sfondo di background tramite codice css

Per avere un background colorato l’istruzione è la seguente:

.nomeclasse{background-colod:#000000;}

In questo caso abbiamo creato una classe che ha come sfondo di background il colore nero.

Per avere un background con un immagine l’istruzione è la seguente:

.nomeclasse{background-image:url(‘{pathurlimage}‘)}

Qui abbiamo associato alla classe un immagine e l’abbiamo definita tramite una url specifica, in questo caso abbiamo sostituito la url con una istruzione in {parentesi graffa}.

Potremmo poi personalizzare ulteriormente il background image, inserendo altre istruzioni come il background-repeat, se vogliamo o no replicare l’immagine linkata, oppure il background-position, se vogliamo decidere in che posizione mostrare l’immagine linkata, oppure il backgraund-fixed, se vogliamo che l’immagine sia fissa in un posto, sia in movimento rispetto allo scorrere della pagina.

Queste e molte altre istruzione ti aspettano con i css.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *