Come impostare un’immagine di sfondo in CSS

Creare un sito web è un ottimo modo per esprimere te stesso. Sebbene esistano molti strumenti per la creazione di siti Web, scriverlo da soli è un modo divertente per saperne di più su come funzionano i siti Web dietro le quinte. Un buon progetto per principianti è creare un sito Web e aggiungere un'immagine di sfondo con CSS. Questo progetto ti consentirà di iniziare a utilizzare sia HTML che CSS.

Cos'è il CSS?

CSS è l'acronimo di Cascading Style Sheet. È un linguaggio di programmazione che ti consente di applicare lo stile ai linguaggi di markup. Uno di questi linguaggi di markup è HTML o Hyper-Text Markup Language. L'HTML viene utilizzato per creare siti Web. Sebbene sia possibile controllare parte dello stile del sito Web utilizzando HTML, CSS offre molte più opzioni di controllo e design.

Creazione di un sito Web di base con HTML

Dal momento che CSS è solo un linguaggio di stile, per usarlo, abbiamo prima bisogno di qualcosa per lo stile. Un sito web molto semplice sarà sufficiente per iniziare a giocare con i CSS. La nostra pagina mostrerà "Hello World".

 <html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>

Nel caso in cui non si abbia familiarità con l'HTML, esaminiamo rapidamente cosa fanno tutti gli elementi. Come accennato, l'HTML è un linguaggio di markup, il che significa che utilizza i tag per contrassegnare qual è il testo. Ogni volta che vedi una parola circondata da <> è un tag. Esistono due tipi di tag, un tag che contrassegna l'inizio di una sezione utilizzando <> e uno che contrassegna la fine di una sezione utilizzando </>. Il testo all'interno di una sezione ha anche lo scopo di rendere questa distinzione più facile da vedere.

Nel nostro esempio, abbiamo quattro tag. Il tag html indica quali elementi fanno parte del sito web. Il tag head contiene le informazioni di intestazione che non vengono visualizzate sulla pagina ma sono necessarie per creare la pagina. Tutti gli elementi visualizzati si trovano tra i tag del corpo . Abbiamo solo un elemento visualizzato, il tag p . Indica al browser web che il testo è un paragrafo.

Correlati: 10 semplici esempi di codice CSS che puoi imparare in 10 minuti

Aggiunta di CSS a HTML

Ora che abbiamo una pagina semplice, possiamo personalizzare lo stile con CSS. La nostra pagina è piuttosto semplice in questo momento e non c'è molto che possiamo fare, ma iniziamo mettendo in risalto il nostro paragrafo in modo da poterlo distinguere dallo sfondo aggiungendo un bordo.

 <html>
<head>
</head>
<body>
<p style="border-style: solid;" >Hello World</p>
</body>
</html>

Ora, il nostro paragrafo sarà circondato da un bordo nero. L'aggiunta di una descrizione di stile in CSS al nostro tag di paragrafo ha indicato al sito Web come applicare uno stile al paragrafo. Possiamo aggiungere altre descrizioni. Aumentiamo lo spazio bianco, o riempimento, attorno al nostro paragrafo e centriamo il nostro testo.

 <html>
<head>
</head>
<body>
<p style="border-style: solid; padding: 30px; text-align: center" >Hello World</p>
</body>
</html>

Il nostro sito web ha un aspetto migliore, ma il nostro HTML inizia a sembrare disordinato con tutte quelle descrizioni nel tag del paragrafo. Possiamo spostare queste informazioni nella nostra intestazione. La nostra intestazione è per le informazioni di cui abbiamo bisogno per visualizzare correttamente il sito web.

 <html>
<head>
<style>
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
</style>
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>

Ora il nostro HTML è più facile da leggere. Noterai che abbiamo dovuto cambiare alcune cose. Il tag style indica le informazioni sullo stile del browser web, ma anche cosa stile. Nel nostro esempio, abbiamo usato due modi diversi per dirgli cosa stile. La p nel tag di stile indica al browser web di applicare quello stile a tutti i tag di paragrafo. La sezione #ourParagraph dice che solo gli elementi di stile con l'id ourParagraph . Si noti che le informazioni sull'id sono state aggiunte al tag p nel nostro corpo.

Importazione di un file CSS sul tuo sito web

L'aggiunta delle informazioni sullo stile all'intestazione rende il nostro codice molto più facile da leggere. Tuttavia, se vogliamo applicare lo stile a molte pagine diverse allo stesso modo, dobbiamo aggiungere quel testo all'inizio di ogni pagina. Potrebbe non sembrare molto lavoro, dopotutto puoi copiarlo e incollarlo, ma crea molto lavoro se vuoi cambiare un elemento in seguito.

Invece, manterremo le informazioni CSS in un file separato e importeremo il file per dare uno stile alla pagina. Copia e incolla le informazioni tra i tag di stile in un nuovo file CSS ourCSSfile.css .

 p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

Quindi, importa il file nel file HTML.

 <html>
<head>
<link rel="stylesheet" href="ourCSSfile.css">
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>

Aggiunta di un'immagine di sfondo con CSS

Ora che hai una solida base in HTML e CSS, aggiungere un'immagine di sfondo sarà un gioco da ragazzi. Per prima cosa, identifica l'elemento a cui vuoi dare un'immagine di sfondo. Nel nostro esempio, aggiungeremo uno sfondo all'intera pagina. Ciò significa che vogliamo cambiare lo stile del corpo . Ricorda, i tag body contengono tutti gli elementi visibili.

 body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

Per modificare lo stile del corpo in CSS, utilizza prima la parola chiave body . Quindi aggiungi le parentesi graffe come abbiamo fatto prima {}. Tutte le informazioni sullo stile per il corpo devono essere comprese tra le parentesi graffe. L'attributo di stile che vogliamo cambiare è background-image . Ci sono molti attributi di stile. Non aspettarti di memorizzarli tutti. Contrassegna un cheat-sheet delle proprietà CSS con attributi che vuoi ricordare.

Correlati: 8 fantastici effetti HTML che chiunque può aggiungere al proprio sito web

Dopo l'attributo, usa i due punti per indicare come cambierai l'attributo. Per importare un'immagine, usa url () . indica che stai utilizzando un collegamento per puntare all'immagine. Posiziona il percorso del file tra parentesi tra virgolette. Infine, termina la riga con un punto e virgola. Sebbene lo spazio bianco non abbia significato in CSS, usa il rientro per rendere il CSS più facile da leggere.

Il nostro esempio è simile a questo:

Se la tua immagine non viene visualizzata correttamente a causa delle dimensioni dell'immagine, puoi modificare l'immagine direttamente. Tuttavia, ci sono attributi di stile di sfondo nei CSS che puoi usare per alterare lo sfondo. Le immagini più piccole dello sfondo verranno automaticamente ripetute sullo sfondo. Per disattivarlo, aggiungi background-repeat : no-repeat ; al tuo elemento.

Esistono anche due modi per fare in modo che un'immagine copra l'intero sfondo. Innanzitutto, puoi impostare la dimensione dello sfondo sulla dimensione dello schermo con la dimensione dello sfondo: 100% 100%; , ma questo allungherà l'immagine e potrebbe distorcere troppo l'immagine. Se non vuoi modificare le proporzioni dell'immagine, puoi anche impostare la dimensione dello sfondo su copertina . Cover farà in modo che l'immagine di sfondo copra lo sfondo, ma non distorce l'immagine.

Modifica del colore di sfondo

Cambiamo un'ultima cosa. Ora che abbiamo un background, il nostro paragrafo è difficile da leggere. Rendiamo bianco lo sfondo. Il processo è simile. L'elemento che vogliamo modificare è #ourParagraph. Il # indica che "ourParagraph" è un nome di identificazione. Successivamente, vogliamo impostare l'attributo background-color su bianco.

 body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}

Molto meglio.

Continuare a progettare il tuo sito web con CSS

Ora che sai come cambiare lo stile di diversi elementi HTML, non ci sono limiti! Il metodo di base per modificare gli attributi di stile è lo stesso. Identifica l'elemento che desideri modificare e descrivi come modificare l'attributo. Il modo migliore per saperne di più è giocare con attributi diversi. Sfida te stesso a cambiare il colore del tuo testo in seguito.