TOUJOURS Center Background Image

J'ai actuellement un problème avec l'effet Im essayant de réaliser sur le pied de page.

Si votre écran est plus large 1200px, alors vous ne verrez pas le bug, mais si vous redimensionnez la fenêtre de votre navigateur pour 1199px de large ou plus petite, vous remarquerez que le pied est tout simplement renversé une fois atteint l'écran 1000px. J'essaie de garder cet article centré, avec le reste de la page (ShellHeader, ShellContent).

Quelle est la méthode d'avoir cette div (ShellFooter) de rester centré sur l'écran, malgré les dimensions du navigateur? Je l'ai vu faire auparavant. Je voudrais penser que ce n'est pas juste une simple background-image dans le corps () avec background-position: bottom center...

(www) (dot) jameschurchard (dot) (com) / demo / neecetire /

Donnez votre div footer une largeur fixe, puis lui donner une marge de 0 auto

Cela va forcer la DIV pour centre. Ainsi

Hmm...qui ne semble pas travailler dans FF3.5 ou IE8.

Oh je vois ce qui est le problème. Essentiellement, votre pied est la partie la plus large de la page entraînant donc le défilement lorsque l'écran devient plus petit que votre pied de page. Dans ce cas vous aurez à donner le pied de page un fond qui est centrée via CSS. Ou créer un pied de plus petite taille.

Création d'un pied de plus petites serait contraire à l'objectif de l'effet que je suis en train de réaliser.



Peut-être une autre approche consisterait pour le background-image de déborder les limites de la div. Donc, si je devais réduire le #ShellContentBottom à 1000px, le background-image est 1200px mais montre encore tout 1200px du background-image.

est #shellcontentbottom enveloppé dans un autre div qui centre le site? Si oui vous pourriez avoir besoin de le tirer hors de cette enveloppe. Retirez ensuite la marge et la largeur de votre css et vous devriez obtenir l'effet souhaité.

Peut-être que vous avez besoin de repenser ce que vous faites là. Beaucoup, sinon la plupart, des gens, ne considère pas que le web à 1200px largeur, donc soit vous faites cette page juste pour vous-même sur votre propre moniteur, ou si vous prenez la réalité en compte.

Utilisez largeur: 100%, puis à bricoler avec le contenu jusqu'à ce qu'il fonctionne de manière satisfaisante pour toutes les largeurs de dire 750px jusqu'à 1400px.

Si le problème est l'image de fond, voici la façon dont il a réussi Ive: Vous créez deux divs identiques, l'un sur le dessus de l'autre. Celui du bas contient juste l'image que vous voulez comme arrière-plan "", et la DIV top:


Donc la partie HTML:



En raison du positionnement absolu des "top", il fait exactement le chevauchement image réduite dans le fond.

Si vous voulez escalader la hauteur de l'image (pour garder ses proportions), vous aurez besoin d'obtenir la taille de la fenêtre d'abord et faire quelques routines DOM pour créer tout cela.

* sigh * Im toujours une arrière-pensée à 1920. Même théorie s'applique, cependant. Im habitude de voir un peu d'espace juste parce thats comment les gens le faire, mais je cibler spécifiquement wouldnt 1200.

Non, je suis d'accord aussi! J'aime mon salut Res 19 "widescreen (1680 largeur).

Il fait presque mal mes sentiments lorsque j'ai entendu que certaines personnes utilisent réellement leur navigateur avec une partie seulement de l'ordinateur de bureau!

Mais c'est la réalité. Allez voir votre ordinateur portable. Ya des chances que la fenêtre du navigateur Web est comme 1000-1100px. Pour moi, le point est que vous voulez, soit à être paresseux et têtu et exécuter à la maison avec votre balle quand le monde va mal, ou si vous serrez les dents et d'apprendre à coder. gif "alt =": roll: "title =" Rolling Eyes "> Les gens vont pas redimensionner leur navigateur ou d'acheter un nouveau moniteur pour faire de votre page Look Good - vous devez le faire fonctionner dans un dynamique, polyvalente manière.

Haha, je pense graphixboy est la seule qui comprend ce que je fais.

Je ne m'attends pas le graphisme 1200px ensemble large pour être affiché. C'est pourquoi je me bats pour maintenir sa position centrale indépendamment de la largeur du navigateur. J'ai choisi 1200px car Ive a commencé à utiliser la largeur de l'emplacement de 1000px depuis 800x600 résolutions sont (heureusement) surtout une chose du passé, et 1024x768 est la faible résolution nouvelle. 100px de chaque côté de mon graphique suffisent à montrer l'effet que je ne désire pas que soit la taille de l'écran.

En réponse à votre graphixboy réponse, oui, le pied est dans une enveloppe ( #ShellContainer) qui maintient le site centré.

Bon, vous aurez besoin pour tirer votre pied hors de cet emballage et le placer en dessous du reste de votre contenu. Cela permettra à votre pied de page pour remplir la largeur de la page. Placez ensuite votre image comme arrière-plan de cette div et centrer avec CSS. Tout contenu devrait aller dans une autre div SO (pied de page - div> -> content) thats configuration la même manière que le contenu de votre corps au centre de taille dynamique dans le pied de page.

J'ai pris le pied hors de l'enveloppe, mais rien n'a changé.

Puis sur mon propre gré, je me mis position: absolute; et largeur: 100%.

And now it works

Merci de m'avoir aidé le long!