Comment positionner la ligne de séparation causée par la répétition d'arrière-plan

Question

Je voudrais avoir un fond de répétition x sur mon corps pour un site Web, mais l'arrière-plan est large de 1024, donc sur des affichages plus larges, la ligne où l'image recommence sera positionné à la droite du corps, et éventuellement visible. Mon contenu est dans un div 800 large centré sur le corps. Je voudrais que le 'split' comme dans le fond répété se produise au centre du corps, où il est caché par le contenu.

Je suis sûr que c'est possible, avec un peu de supercherie, dont les détails sont au-delà de mes compétences de conception novice et de mise en page. Envoyer des commentaires Contournement: J'ai utilisé le plug-in Liquid Rescale GIMP, qui utilise seam carving pour agrandir les images à deux fois leur taille d'origine. Cela fonctionne très bien, et je suis content pour l'instant, mais ce n'est pas une réponse à cette question.

Answer 1

vient de mettre dans le style:

background-position: 400px 0px; 

cela va commencer la répétition 400px du côté gauche (déplaçant ainsi la scission sous le contenu)

Answer 2

Je pense qu'il est impossible de le faire dynamiquement (sans tenir compte de la taille de l'écran) sans utiliser d'expressions CSS. Je ne connais pas les détails sur le support du navigateur. Une recherche rapide google a montré cette page comme un exemple de la façon de le faire.

http://valums.com/vertical/

Answer 3

Une façon simple de le faire sans aucune supercherie CSS ou balisage supplémentaire est de modifier l'image. Centrez l'image d'arrière-plan avec:

background-position: top center; 

... puis de décaler le fichier image réel dans un éditeur. Dans Photoshop, utilisez Filtre >> Autre >> Décalage et utilisez une valeur horizontale égale à la moitié de la largeur de l'image. De même, dans le Gimp, utilisez Layer >> Transform >> Offset.

Ce n'est pas la solution CSS que vous recherchez, mais c'est une solution pragmatique.

Answer 4

Ajoutant à ce que David a dit, créer une image transparente, fond de carrelage est pas difficile:

Seamless background with Photoshop

Il prend un peu de temps, mais il aura l'air bien à toutes les résolutions d'écran une fois que vous c'est fait.