Due sfondi nello stesso div

**ivanisevic82** · 14-05-2009, 10:32

Ciao ragazzi, ho bisogno di una mano.
Ho un div (il container) che dovrà avere (da un cero punto in poi) due sfondi diversi: prima un immagine non ripetuta (960x600px) e poi un'altra da ripetere verticalmente (960x1px).

Come posso fare a inserire due immagini consecutive in uno stesso div?
Oppure a far si che una delle due (quella da 960x1px) faccia da "sfonto totale" e l'altra si sovrapponga a partire dal top (e quindi in totale per 600px).

Spero di essere stato chiaro!

Grazie!

EDIT: Allora, attraverso qualche ricerca mi pare di avere capito che non si possono mettere più sfondi nello stesso div.
Si può aggirare la cosa mettenre un div dentro un altro div.
Il problema è che il div in questione è il container...dovrei fare un container dentro un altro?

**ricman** · 14-05-2009, 11:21

Ad oggi puoi avere un solo sfondo per ogni elemento...
Quindi puoi mettere, ad esempio, due div uno sotto l'altro...

**ivanisevic82** · 14-05-2009, 11:36

Ci sto provando ma non riesco a farlo bene...potete aiutarmi col codice?

Attualmente è messo così:

codice:

<div id="container">
...
</div>

codice:

#container{
margin: 0px auto; 
position: relative; 
width:960px;
text-align: left;
padding: 0px 30px;
position: relative; 
background-image: url(/media/SfondoCentrale.jpg);
background-position: center;
background-repeat:repeat-y;
height:100%;
}

Il container contiene tutto il sito...non credo che dovrei dividerlo in due parti.
Forse potrei fare qualcosa del tipo:

codice:

<div id="MaxiContainer">
<div id="TopContainer">
<div id="BottomContainer">
...
</div>
</div>
</div>

Però non saprei bene come impostarlo e come scrivere la parte css senza fare danni!

Potete aiutarmi?

Grazie mille!

**ivanisevic82** · 15-05-2009, 01:20

Questa però forse non è più una domanda per l'area css, mi devo spostare in html?

**Gufo** · 15-05-2009, 01:44

Se puoi utilizzare position:absolute; risolvi il problema

**ivanisevic82** · 15-05-2009, 01:46

Non sono così bravo da capire cosa me lo impedirebbe!

In ogni caso, il codice l'ho postato su, ho fatto dei tentativi ma con scarsi risultati, potreste farmi una bozza di come dovrei impostare la parte html e quella css?

Grazie mille!

**Gufo** · 15-05-2009, 02:14

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">
<!--
body, html {
	margin: 0;
	padding: 0;
}
#pre_container, #container {
	background-image: url(sfondo_ripetuto.jpg);
	background-repeat: repeat-y;
	background-position: left top;
	height: 800px;
	width: 960px;
	margin-top: -400px;
	margin-left: -480px;
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
}
#container {
	background-image: url(sfondo_960x600.jpg);
	background-position: left top;
	background-repeat: no-repeat;
}
-->
</style>
</head>

<body>

<div id="pre_container"></div>
<div id="container"></div>
</body>
</html>

**ivanisevic82** · 15-05-2009, 03:29

Fatto, funziona in parte.

Al tuo codice ho dovuto apportare delle modifiche perchè ricopiandolo uguale veniva qualcosa di strano...

Alla fine così è quasi perfetto:

codice:

#pre_container, #container {
background-image: url(/media/SfondoCentrale.jpg);
background-repeat: repeat-y;
background-position: center;
height: 100%;
width: 960px;
margin-left: -480px;
position: absolute;
z-index: 0;
left: 50%;
padding: 0px 30px;
}

#container {
background-image: url(/media/ParteCentrale.jpg);
background-position: center;
background-repeat: no-repeat;
}

L'unico problema è che il file "ParteCentrale.jpg" sta 100px più in basso di dove dovrebbe.
Come posso risolvere?

grazie!

**ricman** · 15-05-2009, 09:02

Hai tolto l'altezza dal codice che ti ha passato Gufo... rimettila...

**ivanisevic82** · 15-05-2009, 09:55

Si ma mettendo il codice in quel modo indentico mi viene fuori questo casino!

http://ivanisevic82.netsons.org/page...ra-mission.php

La altezza della parte che si ripete deve essere per forza 100% credo, perchè deve arrivare fino al footer...è in container, contiene TUTTO quello che c'è nella mia pagina, dall'header al footer!
Boh, non mi riesce proprio di fare questa cosa...
Tutto perchè devo mettere delle ombre ai lati della colonna ma lo sfondo è a sfumare....non ci sono altre soluzioni?

Discussione: Due sfondi nello stesso div

Strumenti discussione

Ricerca discussione

Visualizza

Due sfondi nello stesso div

Permessi di invio