DIV con scrollbar e sfondo fermo

**Agosh** · 25-05-2009, 16:43

Ciao a tutti,
vi espongo subito il mio problema:

Ho un div ad altezza fissa, ho delle scritte ed uno sfondo e una scrollbar.

Vorrei che, se l'utente muove la scrollbar, lo sfondo rimanga fisso.

Di default funziona senza aggiungere niente con firefox, IE8, Google Chrome aggiornato.

Invece con IE7 non funziona.

Leggendo in rete sentivo di gente che aggiungeva un:

Codice PHP:


    background-attachment: fixex;

nel CSS.

Facendo così però lo sfondo si sposta in alto.

Sapete aiutarmi?

Vi posto il CSS del div interessato:

Codice PHP:


#centro {

    position: absolute;

    top: 250px;

    left:50%;

    margin-left: -420px;

    width:860px;

    height: 400px;

    overflow: auto;

    background-image: url(immagini/sfondo_riquadro.png);

    background-position: 0 0;

    background-repeat: no-repeat;

    text-align:center;

}

**emnlmn** · 25-05-2009, 19:43

cosa intendi con "lo sfondo si sposta in alto" ?
quale dovrebbe essere la sua posizione?

**Agosh** · 25-05-2009, 21:05

scusa, allora ho un div con lo sfondo.

Il div è a TOP:200, se metto il background:fixed; lo sfondo non comincia da 200 ma da 0.

**Agosh** · 26-05-2009, 12:27

sto diventando pazzo.
Con le versioni non aggiornate di chrome dava lo stesso problema.

**Agosh** · 26-05-2009, 16:51

provo con un UP!

**Mich_** · 26-05-2009, 17:43

Prova a vedere se questo, pubblicato oggi, puo` servire anche nel tuo caso.
Position fixed performante su IE6

**Nophiq** · 26-05-2009, 18:03

Ho provato a fare così e da me funziona (Firefox)

prova.html

codice:

<html>

<head>
<title>Prova CSS</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div id="centro">
	<div class="background"></div>
	<div style="font-weight: bold;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
	when an unknown printer took a galley of type and scrambled it to make a type
	specimen book. It has survived not only five centuries, but also the leap into
	electronic typesetting, remaining essentially unchanged. It was popularised in
	the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
	and more recently with desktop publishing software like Aldus PageMaker including
	versions of Lorem Ipsum.
	
	Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
	when an unknown printer took a galley of type and scrambled it to make a type
	specimen book. It has survived not only five centuries, but also the leap into
	electronic typesetting, remaining essentially unchanged. It was popularised in
	the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
	and more recently with desktop publishing software like Aldus PageMaker including
	versions of Lorem Ipsum.</div>
</div>

</body>

</html>

style.css

codice:

#centro {
	height: 300px;
	width: 500px;
	overflow: scroll;
}

.background {
	background-image: url("background.gif");
	background-position: 0 0;
	background-repeat: no-repeat;
	position: absolute; 
	height: 100%;
	width: 100%;
	z-index: -1;
}

Quello che ho pensato di fare è stato quello di creare un contenitore apposta solo per il background che, grazie a "position: absolute" lo ferma anche se il div scrolla.

Dimmi se funziona correttamente su altri browser

**Agosh** · 26-05-2009, 19:11

Originariamente inviato da Mich_
Prova a vedere se questo, pubblicato oggi, puo` servire anche nel tuo caso.
Position fixed performante su IE6

Non è quello che serve a me visto che a me serve la compatibilità con IE7.

Originariamente inviato da Nophiq
Ho provato a fare così e da me funziona (Firefox)

prova.html

codice:

<html>

<head>
<title>Prova CSS</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div id="centro">
	<div class="background"></div>
	<div style="font-weight: bold;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
	when an unknown printer took a galley of type and scrambled it to make a type
	specimen book. It has survived not only five centuries, but also the leap into
	electronic typesetting, remaining essentially unchanged. It was popularised in
	the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
	and more recently with desktop publishing software like Aldus PageMaker including
	versions of Lorem Ipsum.
	
	Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
	when an unknown printer took a galley of type and scrambled it to make a type
	specimen book. It has survived not only five centuries, but also the leap into
	electronic typesetting, remaining essentially unchanged. It was popularised in
	the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
	and more recently with desktop publishing software like Aldus PageMaker including
	versions of Lorem Ipsum.</div>
</div>

</body>

</html>

style.css

codice:

#centro {
	height: 300px;
	width: 500px;
	overflow: scroll;
}

.background {
	background-image: url("background.gif");
	background-position: 0 0;
	background-repeat: no-repeat;
	position: absolute; 
	height: 100%;
	width: 100%;
	z-index: -1;
}

Quello che ho pensato di fare è stato quello di creare un contenitore apposta solo per il background che, grazie a "position: absolute" lo ferma anche se il div scrolla.

Dimmi se funziona correttamente su altri browser

A me con firefox non funziona.
Con IE incasina tutto alla grande.

(www.weddinginthelanga.com/never.html)

Discussione: DIV con scrollbar e sfondo fermo

Strumenti discussione

Ricerca discussione

Visualizza

DIV con scrollbar e sfondo fermo

Permessi di invio