6
votes

Gardez une image d'arrière-plan du déplacement ou du carrelage dans CSS

J'essaie d'obtenir un arrière-plan qui reste immobile pendant que le texte fait défiler le texte et de centrer l'image et de la maintenir du carrelage ou de la répétition. Comme il se trouve maintenant, je peux l'obtenir à tous les deux. Actuellement, ma feuille de style gère cela de cette façon.

<div id="intro">
<img src="IMAGE SOURCE" width="100%" height="100%">
</div>


3 commentaires

Avez-vous essayé d'utiliser des antécédents d'arrière-plan: Absolute?


Comme ça? w3schools.com/cssref/...


Je ne vois pas ce qui ne fonctionne pas. Pourriez-vous expliquer plus ou Améliorer cette démo ?


4 Réponses :


0
votes

Je pense que ce que vous manquez, c'est que vous avez

    overflow: hidden;


1 commentaires

Votre lien ne démontre pas votre code. Je pense que vos changements n'étaient pas sauvegardés. Essayez jsfiddle.net pour fournir des exemples de code de travail.



0
votes
.whateverclassyouwant{background: (url) fixed center no-repeat; margin:0 auto; height:auto}
should work

0 commentaires

10
votes

Après avoir examiné votre CSS, j'ai remarqué un certain nombre de conflits pouvant être corrigés avec un peu de peaufine. Tout d'abord, je vous suggère que vous utilisiez un outil de développement Web de navigateur (ex. Firebug) pour apporter les modifications et les modifications. Je trouve que cela enregistre votre patience et votre frustration.

La solution que j'ai vint est, comme suit: p> xxx pré>

Si vous souhaitez répéter l'arrière-plan horizontalement, utilisez l'arrière-plan-répéter: x-axe; verticalement, arrière-plan-répéter: axe Y;. Afin de s'assurer que l'arrière-plan ne fait pas défiler, utilisez l'antécédents de fond: fixe;. La position de fond doit être utilisée de deux mots ou deux mesures numériques (EX.CENTER CENTER / GAUCHE HAUT / CENTRE DOP / CENTRE DROIT / CENTRE DU CENTRE / EN BAS DROITE OU 0PX 0PX). Puisque vous voulez que l'arrière-plan ait une hauteur et que je suppose une largeur; La position de l'élément doit être absolue. Si vous décidez de travailler avec des flotteurs, le principal conteneur ou l'arrière-plan doit être absolu. P>

Ma suggestion est si vous souhaitez garder le texte attaché à l'arrière-plan, c'est à vous de décider. J'ai trouvé dans mon expérience qu'il est préférable de séparer le texte de l'arrière-plan. Cela conduit à moins de maux de tête à long terme. Je voudrais coder le texte comme suit: p> xxx pré>

comme pour l'utilisation de IMG SRC et de fond-image, dans mon expérience, j'ai constaté qu'ils sont conflictuels. Pour une raison étrange, la balise IMG SRC ne fonctionnera pas à moins d'un mot ou d'une phrase à l'extérieur des balises. En utilisant les deux, l'IMG SRC remplacera l'élément CSS d'arrière-plan. J'ai trouvé que les balises IMG sont plus difficiles à manipuler dans CSS. C'est faisable, mais un cauchemar à exécuter. p>

Exemple: P>

    <html>
     <body>
      <div class="text">I put my text here.</text>
     </body>
    </html>


0 commentaires

1
votes

Essayez ce qui suit. Veuillez noter l'ajout de no-répéter et arrière-format de fond : xxx


1 commentaires

Merci. arrière-plan: URL ('...') non répétée; + Taille de l'arrière-plan: Couverture; fait tout l'affaire. Ne pouvait pas les trouver nulle part mais ici.