Garder une image d'arrière-plan de déplacement ou de carrelage en CSS

Je vais essayer d'obtenir un arrière-plan qui reste fixe alors que le texte défile sur elle et aussi le centrage de l'image et de l'empêcher de carrelage ou de répétition. Comme il est maintenant, je peux le faire pour les deux, mais pas les deux. Actuellement ma feuille de style poignées de cette façon.

{
background: url(LOCATION OF PIC FILE) repeat fixed;
height: 610px;
text-align: center;
margin: 0 auto;
overflow: hidden;
}

Aussi loin que je peux dire à la hauteur: 610px; les limites de comment loin dans le texte défiler vers le haut, que je tiens à rester. J'ai essayé de changer la "répétition fixe" et une partie ne suis pas obtenir les résultats que j'aimerais. J'ai essayé cette...

{
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 610px;
}

... avec cela dans le code HTML..

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

mais cela ne veut pas garder l'arrière-plan fixe...

toute aide serait appréciée.

InformationsquelleAutor user1754205 | 2012-10-17
  1. 7

    Après avoir pris un coup d'oeil à votre CSS, j'ai remarqué un certain nombre de conflits qui peuvent être résolus avec un peu de peaufinage. Tout d'abord, j'ai vraiment vous suggérons d'utiliser un navigateur web, l'outil de développement (ex. Firebug) pour apporter les modifications et améliorations. Je trouve qu'il enregistre votre patience et de votre frustration.

    La solution que j'ai est venu à l'est, comme suit:

    .body{
    background-image: url('../images/go_here.png');
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-position: left top;
    position:absolute;
    height:610px
    width: ?px;
    margin:0;
   }

    Si vous voulez le fond de répéter horizontalement, puis utiliser background-repeat: l'axe des x; verticalement, background-repeat: l'axe des y;. Vérifiez à l'arrière-plan n'est pas de défilement,utilisez background-attachment: fixed;. Le background-position doit utiliser deux mots ou deux mesures numériques (ex.centre de centre gauche/haut/droite haut/droite centre gauche/centre/bas à droite ou à 0px 0px). Puisque vous voulez le fond de hauteur, et je suis en supposant une largeur; la position de l'élément doit être absolue. Si vous décidez de travailler avec des chars, le conteneur principal ou d'arrière-plan doit être absolue.

    Ma suggestion est que si vous souhaitez conserver le texte attaché à l'arrière-plan, c'est à vous. J'ai trouvé dans mon expérience, il est préférable de séparer le texte de l'arrière-plan. Il mène juste à moins de maux de tête dans le long terme. Je code le texte comme suit:

      .text{
       text-align: center;
       overflow: hidden;
       height: 610?px;
       width: ?px;
       }

    Comme pour l'utilisation de img src et background-image, dans mon expérience, j'ai constaté qu'ils entrent en conflit. Pour quelque étrange raison, le tag img src ne fonctionnera pas, sauf si il y a un mot ou une phrase à l'extérieur des balises. En utilisant à la fois, l'img src va se substituer à l'arrière-plan css de l'élément. J'ai trouvé que les balises img sont plus difficiles à manipuler dans le CSS. C'est faisable, mais un cauchemar pour l'exécuter.

    Exemple: 

         <div><img src="http://www.example.com">Example</div>

    Dans mon expérience, j'ai constaté que img src travaille main dans la main avec text-indent: -9999px; ou display:none;. La balise ne fonctionne pas, sauf si il a un mot ou un élément pour se fixer. Text-indent causes de la parole (ie. Exemple) d'être poussés hors de l'écran. Display: none; les causes de la parole à l'invisible, mais il apparaît sur l'image si mis en évidence. (Je m'excuse si cela ne fait pas de sens. Je peux toujours préciser.)

    Comme pour les balises HTML, je voudrais soit utiliser la balise img ou tout simplement la balise div. Le balisage HTML:

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

    Laissez-moi savoir si cela fonctionne. Je m'excuse que c'est devenu tellement longtemps. Je n'ai pas l'intention pour que. Si vous rencontrez des problèmes ou si vous avez besoin de plus de précisions, laissez-moi savoir. Je ne me dérange pas d'aider.

    InformationsquelleAutor Paula C
  2. 1

    Essayez les solutions suivantes. Veuillez noter que l'ajout de no-repeat et background-size:

    {
    background: url(LOCATION OF PIC FILE) no-repeat;
    background-size: cover;
    height: 610px;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
}
    • Merci. background: url('…') no-repeat; + background-size: cover; fait tout le tour. Ne pouvait pas les trouver n'importe où sauf ici.
    InformationsquelleAutor WalterKPhillips
  3. 0

    Je pense que ce qui vous manque, c'est que vous avez 

        overflow: hidden;

    sur votre arrière-plan ne permettant pas à la div pour faire défiler sauf si vous disposez de ces allumés qui appartient à qui, dans votre css.

    si vous voulez que le débordement à être cachés sur votre div alors que c'est bien, mais il va mettre des barres de défilement sur elle.

    consultez ce lien

    • Votre lien n'est pas la preuve de votre code. Je pense que vos modifications n'ont pas été enregistrés. Essayez de jsfiddle.net de fournir des exemples de code.
    InformationsquelleAutor puddleJumper
  4. 0
    .whateverclassyouwant{background: (url) fixed center no-repeat; margin:0 auto; height:auto}

    devrait fonctionner

    InformationsquelleAutor mkob