fond css répéter à partir 300px partir

Je me demande si quelqu'un sait comment atteindre les objectifs suivants - jeter un oeil à http://www.dspts.si fond css répéter à partir 300px partir

Le premier 1/3 de l'écran a un fond vide et à partir de là il devrait y avoir un motif répétitif. Je l'ai fait tout de suite, en créant un très long pattern png et en le mettant sur offset 300 et repeat-x. Cependant, je ne suis pas satisfait de cette solution car elle se casse si les pages sont toujours plus longues que l'image de fond png.

Merci pour vos suggestions!

Source

2009-12-04 Robert Ivanc

Mettre le motif répétitif comme arrière-plan à l'élément html, puis une image blanche 1px * 300px comme une image d'arrière-plan à l'élément body, et vous êtes tous ensemble.

html, body { 
    height: 100%; 
} 

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

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

Vous ne devez pas utiliser html et body balises pour cela, mais il est le plus simple et ne nécessite pas de nouvelles balises.

Source

2009-12-04 10:08:49

N'est-ce pas possible avec seulement 1 image? – xtofl

Non, car vous ne pouvez pas truquer la zone blanche 300px haute avec des éléments, et vous ne pouvez pas combiner les images car l'arrière-plan html doit être répété –

merci travaillé comme un charme! –

Oui, indiquez votre image de fond comme normal, mais définir la background-position comme ceci:

background-position:0 300px;

Cela fera au début 0px l'image d'arrière-plan de la gauche, et 300px de haut. N'oublions pas que vous pouvez utiliser FireBug avec FireFox pour diagnostiquer facilement des techniques sur des sites Web.

Source

2009-12-04 08:57:40

et pouvez-vous toujours utiliser repeat-y, alors? – xtofl

Ah juste point: D, n'a pas remarqué que http://www.dspts.si/ utilisé une très longue image mince répétée. Mon mauvais –

oui, eh bien, c'est ce que j'ai fait en ce moment avec la position. Si je le répète, je le ferai pour une raison ou pour une autre et j'aurai aussi des motifs sur le dessus. :( –

Vous pouvez spécifier plusieurs arrière-plans. Voir Can I have multiple background images using CSS?. Les techniques mentionnées il y a:

Mettre la page entière dans un autre conteneur <div> ou de détournement de la balise <html> pour elle.
Cela signifie que vous spécifiez un arrière-plan pour <body> et un pour <html>.
Utilisez CSS3 qui prend en charge plusieurs images d'arrière-plan. Ce n'est pas encore pris en charge par tous les navigateurs courants.

Source

2009-12-04 10:05:48

fond css répéter à partir 300px partir

Répondre

Questions connexes