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

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

  •  12-09-2019
  •  | 
  •  

Question

Je me demande si quelqu'un sait comment atteindre les objectifs suivants - jeter un oeil à http://www.dspts.si

La première 1 / 3ème de l'écran a un fond vide et à partir de là il devrait y avoir un motif répétitif. Je l'ai fait en ce moment, en créant un modèle très long .png et mis à compenser 300 et repeat-x. Cependant, je ne suis pas satisfait de cette solution car il brisera si les pages jamais obtenir plus que l'image de fond est .png.

Merci pour toutes suggestions!

Était-ce utile?

La solution

Placez 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 des balises html et body pour cela, mais il est le plus simple et ne nécessite pas de nouvelles balises.

Autres conseils

Vous pouvez spécifier plusieurs arrière-plans. Voir Puis-je avoir plusieurs images d'arrière-plan en utilisant le CSS? . Les techniques mentionnées il y a:

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

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

background-position:0 300px;

Il sera l'image de fond à 0px début de la gauche, et 300px de haut.

Il ne faut pas oublier que vous pouvez utiliser Firebug avec FireFox pour diagnostiquer facilement les techniques sur les sites Web.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top