sovrapporre 2 imagini nel background

**leaf** · 21-10-2013, 01:56

ciao, ho cercato disperatamente in giro ma non ho trovato una soluzione che funzioni (per ora). Sto facendo il sito nell'immagine

al momento, i 2 fuochi artificiali ai lati e il titolo sono in un'unica immagine

codice:

div#norma{background:url("./festival.png");background-repeat:no-repeat;background-position:top; /*background-attachment:fixed; */color:purple;font-weight:500;}

la mia idea è quella di averli invece separati, in modo che la scritta resti esattamente com'è, e invece i fuochi ai lati siano in

codice:

background-attachment: fixed

ho provato con l'opacity, ho provato creando 2 div separati ma in ogni caso si sovrappongono e non è il risultato che voglio ottenere. il modo più semplice per farlo (ma si può fare?

) secondo me era caricare le immagini in 2 div distinti, rimpicciolire l'immagine con il testo (e qui non sono riuscito a farlo) e caricare l'altra ("sotto") alla scritta..ma forse ci sono altri modi?

ciao e grazie

L.

**carlomarangoni** · 21-10-2013, 16:05

Hai provato a fare tre div due per i fuochi e uno per la scritta posizionandoli con il float?

**leaf** · 21-10-2013, 17:07

no, mi spiegheresti meglio? float...sarebbe? hai qualche esempio da linkarmi? grazie

**carlomarangoni** · 21-10-2013, 17:23

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
#contenitore {
 background-color: #000;
 margin: 0 auto;
 padding: 0px;
 height: 200px;
 width: 980px;
 overflow: hidden;
}
#fuoco1, #fuoco2 {
 background-image: url(fuoco1.jpg);
 margin: 0px;
 padding: 0px;
 float: left;
 height: 200px;
 width: 200px;
 overflow: hidden;
}
#scritta {
 background-image: url(scritta.jpg);
 margin: 0px;
 padding: 0px;
 float: left;
 height: 200px;
 width: 580px;
}
#clear {
 clear: both;
}
</style>
</head>
<body>
<div id="contenitore">
  <div id="fuoco1">&nbsp;</div>
  <div id="scritta">&nbsp;</div>
  <div id="fuoco2">&nbsp;</div>
  <div id="clear">&nbsp;</div>
</div>
</body>
</html>

**leaf** · 21-10-2013, 17:53

ok grazie, stasera provo..però io ora ho una classe nel css in cui o inserito l'immagine (#div norma)..posso inserire tutto in una classe? questo perchè questo sfondo dev'essere così per ogni pagina..

ciao e grazie ancora

L.

**carlomarangoni** · 21-10-2013, 18:05

Il mio è solo un esempio di come devi fare poi tu puoi adattarlo come vuoi.

Puoi anche, invece di scrivere il codice in ogni pagina, fare una pagina solo dell'intestazione e includerla dinamicamente in ogni pagina, lato-server o lato-client come preferisci

**leaf** · 21-10-2013, 21:15

Originariamente inviata da carlomarangoni

Puoi anche, invece di scrivere il codice in ogni pagina, fare una pagina solo dell'intestazione e includerla dinamicamente in ogni pagina, lato-server o lato-client come preferisci

ma infatti non voglio copiare tutto in ogni pagina ma inserirlo nel css e poi includerlo in ogni pagina..
però, scusa, ma non ho ancora capito come fare

io parto da questo:

codice:

div#norma{background:url("./festival.png");background-repeat:no-repeat;background-position:top;/*background-attachment:fixed; */color:purple;font-weight:500;}

che al momento è l'immagine che ho postato sopra..come faccio a inserire il codice che tu hai scritto, dentro questo div?

grazie

L.

**carlomarangoni** · 22-10-2013, 00:04

Non ti basta includere in ogni pagina solo il css ma devi includere anche il codice html. devi fare un'inclusione di tutto il codice come ti ho detto sopra

**leaf** · 22-10-2013, 00:36

Originariamente inviata da carlomarangoni

Non ti basta includere in ogni pagina solo il css ma devi includere anche il codice html. devi fare un'inclusione di tutto il codice come ti ho detto sopra

ah ok.. non avevo capito..ma tu sopra hai detto anche che posso fare un'unica intestazione con il codice e poi includerla..? ma in ogni caso non si rischia di andare a creare problemi al css già esistente?

grazie ancora

L.

**deleted_20210415** · 22-10-2013, 21:44

Originariamente inviata da leaf

ah ok.. non avevo capito..ma tu sopra hai detto anche che posso fare un'unica intestazione con il codice e poi includerla..? ma in ogni caso non si rischia di andare a creare problemi al css già esistente?

grazie ancora

L.

Oppure potresti optare per una semplice scritta creata con alcuni tag, senza ricorrere ad immagini... Prova ad esempio a scrivere

codice:

<p class="testo">F<k>e</k>s<k>t</k>i<k>v</k>a<k>l</k> <k>O</k>r<k>g</k>a<k>n</k>i<k>z</k>a<k>t</k>i<k>o</k>n</p>

e nel CSS aggiungi:

codice:

.testo {

text-align: center;
color: #F0E838;

}

k {

color: #CE0ACE;

}

Così almeno hai qualcosa di pulito

Discussione: sovrapporre 2 imagini nel background

Strumenti discussione

Ricerca discussione

Visualizza

sovrapporre 2 imagini nel background

Permessi di invio