Sfondo del div non si ripete!

**BevoUrina** · 29-12-2008, 04:44

Ciao a tutti sono nuovo ed ho un problema che a mio avviso e' da principianti ma mi sta facendo impazzire e non so come risolverlo; sto creando un piccolo sito amatoriale, ho piazzato un immagine di sfondo in un div (per poterla adattare a qualsiasi risoluzione) in questo modo:

codice:

.sfondo {
background-image: url(SfondoBuono.bmp);
background-repeat: repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

A questo punto lo sfondo viene correttamente visualizzato e si adatta a qualsiasi risoluzione (se invece di metterlo in un div lo metto nel body non funziona!) ma se vado ad inserire del testo o qualsiasi altra cosa all'interno della pagina e lo posiziono oltre la fine del viewport (in modo tale da far comparire la barra di scorrimento e "allungare" la pagina) lo sfondo non viene ripetuto. Ad esempio se creo la classe testo cosi:

codice:

.testo {
color: black;
width: 20%;
height: 20%;
position: absolute;
left: 20%;
top: 110%;
}

E imposto corpo del documento in questa maniera:

codice:

...
...
</style>
</head>
<body>
<div class="sfondo"><div class="testo">ciao ciao</div></div>
</body>

visualizzo tutto correttamente (l'immagine di sfondo e la scritta), la pagina scorre ma lo sfondo non e' ripetuto...ottengo lo stesso risultato anche se non annido i div.. esiste una soluzione?? Accredito 3 euro con paypal a chi mi da una valida soluzione..
Grazie

**Gufo** · 29-12-2008, 14:05

Vediamo se riesco a spiegarmi!

Tu hai definito un contenitore (sfondo) che al suo interno ha un box (testo), ora tu hai messo il box testo in fondo al contenitore sfondo, il contenitore sfondo finisce sulla stessa linea di inzio del contenitore testo, quindi è naturale che l'immagine di riempimento del contenitore sfondo si fermi all'inizio del contenitore testo.

Per ovviare a questo devi fare così:

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">
<!--
.sfondo {
background-image: url(SfondoBuono.bmp);
background-repeat: repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 110% 0 0 20%;
}

.testo {
background: transparent;
color: black;
width: 20%;
height: 20%;
}
-->
</style>
</head>

<body>

<div class="sfondo">
      <div class="testo">Ciao Ciao</div>
</div>

</body>
</html>

**BevoUrina** · 29-12-2008, 18:13

lol ma questa non e' affatto una soluzione al mio problema!! Io vorrei lo stesso risultato che si otterrebbe se l'immagine fosse nel body:

codice:

<style type="text/css">
body {
background-image: url(sfondo.jpg);
}

Cosi facendo qualsiasi contenuto si vada ad estendere oltre il viewport causa un allungamento della pagina e una ripetizione dello sfondo; purtroppo se opto per tale soluzione e lo visualizzo su monitor di grandezze diverse viene una porcata!

Con la tua soluzione Gufo ottengo solo di iniziare a inserire il sito dalla seconda pagina......

nel senso che essendovi padding al 110% non potrei mettere nulla nella prima pagina, e in ogni caso otterrei un allungamento statico di sole due pagine, ma io nel mio sito voglio mettere un forum e voglio che la pagina si allunghi dinamicamente all'aumentare del num. dei messaggi...

Arrivo fino a 5 euro con paypal per una soluzione valida...
Grazie

**BevoUrina** · 29-12-2008, 18:53

Aggiungo altro giusto per fare chiarezza...sino ad ora (senza provar con php) l'unico modo che ho trovato per adattare un immagine di sfondo a qualsiasi risoluzione video e' questo:

codice:

<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0px;
}

.img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

</style>
</head>
<body>
<div class="img">[img]SfondoBuono.bmp[/img][/B]</div>
</body>

Ma rimane sempre il problema di come far ripetere tale immagine una volta che i contenuti abbiano oltrepassato il fondo del viewport..

P.S. Senza la parte in grassetto l'immagine nn si adatta..

**BevoUrina** · 29-12-2008, 23:20

Scusate ragazzi forse non mi sono spiegato, anche perchè cio che voglio fare non dovrebbe essere trascendentale! ok io ho un immagine che ho costruito con photoshop, non so come fare a postarla ma essa consiste in due bordi grigio scuri sfumati laterali e una parte centrale bianca. Ora, i due bordi laterali non devono contenere nulla ma servono solo come abbellimento e vorrei che mano a mano che aggiungo contenuto nella parte centrale (che e' semplicemente bianca) il tutto si allunghi come in tutti i siti che trovo per la rete... All'occorrenza posso anche dividere l'immagine in 2 o 3 parti e impostare un layout a colonne...ma visto che sono alle prime armi prima di cimentarmi vorrei essere certo che una soluzione del genere risolva il problema..

Per cortesia stò rinnegando la fede aiutatemi..

Se qualche buona anima volesse farsi un idea di ciò che stò dicendo la famigerata immagine (tutta intera) e' qui http://ilfermo.altervista.org

Grazie

**Gufo** · 30-12-2008, 01:41

Forse io sono impedito, non lo nego, ma o non ho ancora capito a fondo le tue intenzioni, o non ho capito perchè non vuoi mettere la l'immagine come sfondo del body. se tu la mettessi come sfondo del body e la adatti alle varie risoluzioni con un piccolo JS, non avresti risolto il problema che ho capito io?

**BevoUrina** · 30-12-2008, 15:37

lloll gufo qui l'unico impedito sono io te lo garantisco!! Si hai perfettamente ragione...il fatto e' che non so usare javascript e l'unico script che avevo trovato in giro gia bello e pronto è il fixedbackground.js che non funzionava bene... cerchero' di dare un occhiata alla guida javascript che è qui nel sito....a quanto mi sembra di aver capito per fare un layout decente e "moderno" i css non bastano!

In ogni caso (per farti capire meglio le mie intenzioni) quello che voglio fare si può dedurre anche prendendo spunto da questa pagina qui; Io ho un immagine costituita da due colonne laterali (come queste azzurrine) che sono grigie sfumate e un corpo centrale bianco, se aggiungo un qualsiasi contenuto nel corpo centrale tale da ottenere 2 o + pagine e scorro utilizzando la barra di scroll le colonne laterali non si ripetono e le pagine successive alla prima vengono visualizzate tutte bianche..

Spero vivamente di venirne a capo..

Grazie a tutti cmq..

**BevoUrina** · 30-12-2008, 19:19

ok ci sono quasi!! ho trovato questo script che spero di aver messo nel posto giusto:

codice:

<html>
<head>
<script language="javascript">
function resize()
{
  var immagine = document.getElementById("SfondoBuono.bmp");
  immagine.style.width = document.body.clientWidth;
  immagine.style.height = document.body.clientHeight;
}
</script>
<title>Documento senza titolo</title>
<style type="text/css">
body {
margin:0px 0px 0px 0px;
padding:0px;
background-image: url(SfondoBuono.bmp);
}

</style>
</head>
<body onload="javascript:resize();" onresize="history.go(0)">
</body>

Non funziona e credo che l'errore sia nella parte in grassetto....inatti, dalla descrizione presente al sito da cui l'ho scaricato si evinceva che tale scrit non è progettato per le immagini di sfondo bensi per immagini generiche identificate da un id. La mia immagine invece e' nel body: posso modificarlo in modo tale da fargli prendere in input il mio sfondo??

Grazie

**fcaldera** · 30-12-2008, 20:04

come da regolamento
1 problema = 1 discussione

visto che usi uno script e hai aperto un thread nel forum js, questa discussione chiude.

Discussione: Sfondo del div non si ripete!

Strumenti discussione

Ricerca discussione

Visualizza

Sfondo del div non si ripete!

Permessi di invio