css sfondo ripetendo da 300px partire

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

  •  12-09-2019
  •  | 
  •  

Domanda

Mi chiedo se qualcuno sa come ottenere le seguenti - dare un'occhiata a http://www.dspts.si

Il primo 1/3 dello schermo ha uno sfondo vuoto e da lì in poi ci dovrebbe essere un modello di ripetizione. L'ho fatto in questo momento, con la creazione di un modello lungo png e impostarlo per compensare 300 e repeat-x. Tuttavia, io non sono contento di questa soluzione perché si romperà se le pagine mai si allungano oltre lo sfondo dell'immagine PNG è.

Grazie per eventuali suggerimenti!

È stato utile?

Soluzione

Mettere il modello che si ripete da sfondo alla html elemento, quindi un'immagine di bianco 1px * 300px come immagine di sfondo per body elemento, e sei a posto. 

html, body {
    height: 100%;
}

html {
    background: url(dotted.png);
}

body {
    background: url(white_1x300.png) 0 0 repeat-x;
}

Non è necessario usare html e body tag per questo, ma è il modo più semplice e non richiede alcun nuovo markup.

Altri suggerimenti

È possibile specificare più sfondi. Vedere Posso avere le immagini di sfondo multipla usando i CSS? . Le tecniche di cui ci sono:

  • Mettere l'intera pagina in un altro contenitore <div> o abusare il tag <html> per esso.
    Questo significa che si specifica uno sfondo per <body> e uno per <html>.
  • Usa CSS3 che supporta più immagini di sfondo. Questo non è ancora supportato da tutti i browser più comuni.

Sì, specificare l'immagine di sfondo come normale, ma impostare il background-position in questo modo: 

background-position:0 300px;

Questo renderà lo sfondo immagine start a 0px da sinistra, e 300px dall'alto.

Non dimentichiamo che è possibile utilizzare FireBug con FireFox per diagnosticare facilmente tecniche sui siti web.

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