css sfondo ripetendo da 300px partire
-
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!
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.