Sfondo

**Laiton** · 04-03-2012, 20:57

ho dei problemi con un sfondo.
css

codice:

<style type="text/css">
body
{
  margin: 0 auto;
  padding: 0;
  color: #4A4A4A;
  background-color: #1A1A1A;
  /*background-image: url('Bottom_texture.jpg');*/
  background-repeat: repeat-x;
  background-attachment: scroll;
  background-position: top left;
  min-width: 1024px;
  min-height: 640px;
}

#art-page-background-middle-texture
{
  position: absolute;
  background-image: url('http://img96.imageshack.us/img96/4941/toptexture.jpg');
  background-repeat: repeat-y;
  background-position: top center;
  background-attachment: scroll;
  width:100%;
  min-height:100%;
  overflow:visible;
  
}
</style>

index

codice:

<html>
<body>
<div id="art-page-background-middle-texture">
    ciao
</div>
</body>

</html>

se rimpiccioliscono la finestra, lo sfondo viene caricato a metà, almeno dalla capacità della finestra rimpicciolita.
help, voglio che lo sfondo sia completo xD

**LuigiMem** · 05-03-2012, 11:59

sai che non è molto chiaro?? io ho provato e vedo lo sfondo intero che si ripete in basso...
prova a spiegarmi meglio...

ciao

**Laiton** · 05-03-2012, 14:55

Si, ok, mi spiego meglio.
In alto a sinistra, sulla finestra del browser c'è il tasto ingrandisci/rimpicciolisci.
Se la finestra è rimpicciolita (faccio un esempio 300x300px) escono le scrollbar.
Aggiornando la pagina a con queste nuove dimensioni, si nota che scendendo con le scrollbar lo sfondo non è ripetuto, ma si interrompe.
Spero di essermi spiegato, se non è chiaro metto delle immagini xD

**LuigiMem** · 05-03-2012, 20:03

Il problema è dovuto al fatto che il fondo lo dai ad un div che non avra mai il 100% perlomeno come lo hai scritto tu bisognerebbe fare delle modifiche, ti ho modificato leggermente i css
mettendo l'immagine nel "body" che per quello che vuoi fare tu forse è più indicato:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
color: #4A4A4A;
background-color: #1A1A1A;
background-image: url(http://img96.imageshack.us/img96/4941/toptexture.jpg);
background-repeat: repeat-y;
background-attachment: scroll;
background-position: center top;
min-height: 640px;
}

#art-page-background-middle-texture
{
width:800px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>

<body>
<div id="art-page-background-middle-texture">
ciao
</div>
</body>
</html>

Ciao

**Laiton** · 07-03-2012, 18:32

Il problema è risolto a metà.
Ora lo sfondo si prolunga in lunghezza, ma non larghezza. Mi spiego.
se rimpicciolisco la finestra, lo sfondo non parte dall'inizio dell'immagine, ma dal mezzo.
non so se mi sono spiegato.

Faccio gli screen:
immagine a tutto schermo (qui tutto ok)

immagine a finestra con altezza diminuita (qui tutto ok)

immagine a ginestra con altezza e larghezza diminuita (qui il problema)
[Lo sfondo parte da metà!]

**LuigiMem** · 08-03-2012, 00:57

mi devi perdonare ma io forse non ho ben capito coosa vuoi ottenere?
dalle tue immagini (la terza dove c'è il problema è molto scura) mi pare di vedere un comportamento "corretto" in base a come ti ho modificato il CSS, quindi forse non ho chiaro in mente cosa vorresti fare..

lo sfondo è sempre centrato al top e dimensione fissa se stringi è normale che vedi la porzione scura...

fammi sapere,
ciao

**Laiton** · 08-03-2012, 08:23

In effetti è difficile da spiegare, ma ci stiamo arrivando xD
è tutta scura proprio perchè lo sfondo inizia dal mezzo dell'immagine.
Io vorrei che lo sfondo non facesse questo giochetto, vorrei che iniziasse comunque "dall'inizio".

**LuigiMem** · 08-03-2012, 12:11

fai una cosa metti uno sfondo chiaro provvisorio per prova, e rifammi lo stamp cosi capisco o vedo meglio la natura del problema. Puoi farlo?
ciao

**Laiton** · 08-03-2012, 14:31

Finestra a tutto schermo:

finestra piccola

Vedi, in quella a tutto schermo lo sfondo inizia dal blu. mentre quando la finestra è rimpicciolita lo sfondo non si riadatta, ma parte dal rosso.

**LuigiMem** · 08-03-2012, 23:10

prova cosi:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

html,body
{
margin: 0;
padding: 0;
color: #4A4A4A;
background-color: #1A1A1A;
min-height: 640px;
min-width:800px;
height:100%;
}

#container{
width:100%;
margin-left:auto;
margin-right:auto;
background-image: url(http://img96.imageshack.us/img96/4941/toptexture.jpg);
background-repeat: repeat-y;
background-attachment: scroll;
background-position: center top;
min-width:800px;
height:100%;
}

#art-page-background-middle-texture
{
width:800px;
margin-left:auto;
margin-right:auto;
}

</style>
</head>

<body>
<div id="container">

<div id="art-page-background-middle-texture">
ciao
</div>

</div>
</body>
</html>

Discussione: Sfondo

Strumenti discussione

Ricerca discussione

Visualizza

Sfondo

Permessi di invio