Discussion :

[Paenitentia]

Bonjour à tous,

Je souhaite réaliser un site internet avec une grande image d'arrière plan utilisée à fond perdu.

Elle possède une apparence simplifiée de deux rectangles l'un au dessus de l'autre. Le premier rectangle (la photo) fait 1300 pixels de large, le rectangle en dessous (la frise rouge) 1920 pixels de large (Il ne s'agit toutefois que d'une seule grande image de 1920 pixels). Je souhaite déclarer mon site avec une largeur de 1000 pixels pour le contenu.

Cette image étant utilisée à fond perdu, je l'ai centrée avec la propriété css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-position: center top;

Lorsque j'affiche mon site en taille "normale", tout va bien :



Ma zone de contenu fait bien 1000 pixels de large, parfaitement centrée (150 pixels de photo de chaque côté + 70 pixels de chaque côté pour la frise).

La barre de menu volontairement tronquée fait une largeur de 1000 pixels. Autrement dit, si un utilisateur possède une résolution de 1000 pixels ou moins, il ne verrait que cette partie de la page.



Mon problème survient toutefois lorsque je diminue donc la taille de ma fenêtre, l'image de fond se décentre. À partir d'une certaine largeur, la partie gauche est sur tronquée et enlève une partie du texte (alors que comme vu plus haut, celui-ci devrait rester complètement apparent quoi qu'il arrive). On peut bien voir par rapport un logo et au menu le décalage qui s’opère, le logo se décale d'un élément de menu !



Il vous est possible de consulter la page d'accueil enregistrée

Comment faire pour que mon image de fond reste centrée quoi qu'il arrive ?

En vous remerciant par avance pour votre aide.

[Muchos]

Je crois au contraire que ça se comporte normalement. "background-position: center top;" ne fait que centrer l'image d'arrière plan.

PS: Au fait, ça devrait être dans le forum CSS, ça ?

[Paenitentia]

Mais comment se fait-il qu'il y ait un décalage qui se crée par rapport aux "composants" ? Et si l'image était parfaitement centrée, pourquoi est-ce qu'en réduisant l'image d'arrière-plan encore plus, on finit par observer du blanc sur la partie droite de la page (et non la gauche) alors que mon image est parfaitement symétrique au niveau de cette disposition.


Je me suis aperçu après avoir posté que j'étais dans la mauvaise section. Si un modérateur peut le déplacer dans CSS, ce serait gentil.