CSS risolto problema di sfondo ripetuto

StackOverflow https://stackoverflow.com/questions/432784

  •  10-07-2019
  •  | 
  •  

Domanda

Sto progettando un sito con uno sfondo ripetuto fisso ma non riesco a capire perché abbia un problema.

Se carichi il sito in una piccola finestra, quindi scorri verso destra, lo sfondo non prosegue e viene invece visualizzato il colore di sfondo.

Qualche idea?

Il sito è: http://new.focalpix.co.uk/

CSS per lo sfondo è: 

body {
    background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed;
}
È stato utile?

Soluzione

Prova il seguente CSS: 

body, html {
    color:#fff;
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}

body {
    font-size: 70%;
}

Sembra che (sia in Opera che in Chrome) il browser stia trattando l'area esterna alla finestra iniziale del browser come parte del tag HTML ma non come parte del CORPO. Puoi verificarlo inserendo l'immagine di sfondo nell'HTML ma non il tag BODY - e poi vedi come appare solo nell'area di scorrimento per visualizzare il documento. Non ho idea del perché questo accada - nessuno?

CSS sopra sembra risolvere il problema, però.

Altri suggerimenti

hai definito lo sfondo del corpo: url nella linea 13 style.css, ma hai anche definito le regole per lo sfondo del corpo nella regola a partire dalla linea 17.

La regola sulla riga 17 è per body, html, ma quella che inizia sulla riga 11 è solo per body. Probabilmente potresti condensarli in un'unica regola, definendo esattamente ciò che vuoi che sia lo sfondo: un colore o un'immagine da un URL

Ciò è dovuto al fatto che il tag <body> è impostato per impostazione predefinita sul 100% della larghezza della finestra del browser, non sul sito. Ciò significa che quando la larghezza della finestra è inferiore a 960 px - la larghezza del sito, il blocco del corpo termina. Per risolvere questo problema, imposta semplicemente: 

body {min-width: 960px}

Sfortunatamente, min-width non funziona nelle vecchie versioni di Internet Explorer senza un hack JavaScript chiamato minmax . Suggerirei di racchiudere il codice di incorporamento javascript all'interno di alcuni commenti condizionali per evitare una richiesta HTTP non necessaria e potenziali errori di compatibilità nei nuovi browser. Quindi incorpora minmax in questo modo: 

<!--[if lte IE 7]>
<script type="text/javascript" src="minmax.js"></script>  
<![endif]-->

Inoltre, un consiglio generale: questi problemi sono abbastanza facili da risolvere giocando con firebug .

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top