Skip to content
Freewebsolution
Menu
  • Home
  • angular
  • php
  • guide
  • laravel
  • react
  • corsi
Freewebsolution
Menu

Sfondi multipli con i css3

Posted on 23 Novembre 201429 Marzo 2016 by lucio
Category: css3, tutorial
3.394 views Tempo di lettura: < 1 minuto

Con i css3 è possibile applicare sfondi multipli alle vostre pagine web,in questo tutorial vedremo come.
Per applicare due o più immagini ad un elemento html è sufficiente specificare per le diverse proprietà collegate alle immagini di sfondo i valori associati ad ogni singola immagine separata da virgola. Forse è meglio se vediamo un esempio pratico:

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8"/>
		<title>Sfondi multipli</title>
		<style> 
body{
  background:
    url(terreno.png) left bottom repeat-x fixed,
    url(alberi.png) left bottom repeat-x fixed,
    url(montagne.png) 150px 100% no-repeat fixed,
    url(nuvole1.png) 250px 20px no-repeat fixed,
    url(nuvole2.png) 450px 100px no-repeat fixed,
    url(nuvole3.png) 200px 90px no-repeat fixed,
    url(sole.png) 20px 20px no-repeat fixed,
    url(cielo.png) left top repeat-x fixed,
    #d9e4ba;
}
		</style> 
	</head> 
	<body>
	</body>
</html>

Gli sfondi si dispongono uno dietro l’altro nell’ordine in cui sono specificati come nell’esempio.

Lucio Ticali

Lucio Ticali - Insegnante su Udemy

Hi, I'm Lucio Ticali, author of this blog. I am a Full stack developer and Udemy Instructor with over 20 years of experience in the Information Technology sector.

Ultime da Freeweb

  • Creare un’applicazione di e-commerce con Laravel e Stripe
  • Come integrare Stripe con Laravel 11
  • Realizza il gioco del solitario con React e Laravel: Parte 1
  • Creare Interfacce Dinamiche con Laravel 11 e Livewire 3: Guida Passo-Passo
  • Come creare una Progressive Web App (PWA) con Laravel 11

Corsi da non perdere

React NodeJs FullStack

€ 9.99 / €12.99 Guida React e Nodejs

Ebook da non perdere

Laravel 11 dall'idea al codice

€ 9.99 / €21.99 laravel 11: dall'idea al codice

©Copyright 2025 - Freewebsolution. All rights reserved, Lucio Ticali Lucio ticali Udemy instructor instructor. Privacy-Informativa cookies