Images d'arrière-plan - de prendre une pleine largeur de l'image à l'intérieur d'un conteneur

J'ai besoin de mettre du contenu HTML à l'intérieur d'un modèle de page. L'article que j'ai reçu est à l'intérieur d'un conteneur Div définition de la taille que j'ai à travailler avec. Le CSS pour le modèle définit les marges de 17,5% à gauche et à droite sens que j'ai de 65% dans le centre à l'entrée de mon contenu. C'est ok pour la majorité du contenu j'ai besoin d'inclure à l'exception de l'image de fond qui doit être pleine largeur (100%). Je peux joindre une feuille de style avec le contenu de mon cependant si je change le .élément wrapper dans mon css, il provoque des problèmes avec le reste de la page. J'ai aussi changer l'image de fond sur une page en page, de façon à inclure le chemin de l'image dans le HTML et pas dans le CSS.

Ce que j'ai à ce jour est

HTML:

 <div class="pageBackground">
        <img src="img/festival-background.jpg">
    </div>

CSS:

.pageBackground {
position: relative;

}

.pageBackground img {
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;

}

Ce serait une bonne façon de faire mon image de fond à 100% de la page, plutôt que de conteneur et derrière le reste de mon contenu?

Merci beaucoup d'avance!!!

si c'est un enfant, il sera de 100% de celle du parent. Essayez de faire le parent 100% de la page.
Le problème est le parent est .papier d'emballage dans les modèles de css que je ne peux pas vraiment modifier. Est-il un moyen de "casser" les parents de règles?
si vous ne pouvez pas modifier le "wrapper " parent", cela veut dire que vous ne pouvez accéder à votre spécifique div?
A peu près. Je peux donner la 3ème partie d'une feuille de style à joindre, mais ils ne sont pas désireux de me laisser toucher au CSS existant. Fondamentalement, j'ai une zone à l'intérieur de leur modèle pour l'ajout de mon contenu, mais comme je le dis la zone que j'ai est enveloppé dans un Div avec la classe "wrapper" qui est stylisé à gauche et à droite de la marge à 17,5%, mais mon arrière-plan doit être pleine page! (J'espère que le bon sens!)
Changement .wrapper pour être pleine largeur + hauteur puis ajouter une nouvelle DIV pour remplacer l'original .wrapper DIV avec l'ancien 17,5% de marges. l' .wrapper DIV aurez probablement besoin d'être en position absolue avec les z-index. la nouvelle DIV seront positionnés relativement avec un z-index supérieur. Donner un aller et voir si cela fonctionne pour vous.

OriginalL'auteur user3375160 | 2014-03-03

  1. 2

    Ne sais pas si vous avez ce genre de permission, mais vous pourriez mettre img en dehors de cette div, et ce, à la fois sur la position absolue.

    <img src="asdf>
<div class="wrapper">

    CSS:

    .wrapper {
position: absolute;
text-align: center;
width: 65%;
background-color: transparent;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -32.5%;
}

img {
position: absolute;
top: 50%;
width: 100%;
height: 50px;
background-color: gray;

}

    jsFiddle

    OriginalL'auteur Davion

  2. 2

    Dans votre CSS, ajouter l'image d'arrière-plan de la propriété du corps, puis mettre le reste de votre site dans l'ensemble d'une div conteneur, dans lequel toutes les autres propriétés de résider.

    HTML:

     <body>
   <div class="entireSite">
     Site content goes here.
   </div>
 </body>

    CSS:

    .body {
   background-image:url("img/festival-background.jpg");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size:cover;
}

.entireSite {
   position: absolute;
   z-index: -1;
}
    J'ai besoin d'utiliser d'horizons différents sur les différentes pages donc je ne peux pas vraiment mettre le chemin de l'image dans le CSS. Aussi j'ai à peu près ne peut entrée HTML entre la Div conteneur, j'ai accès à et de donner un 3ème partie d'une feuille de style à joindre donc je ne peux pas vraiment possible d'éditer le fichier CSS.
    si vous n'avez pas accès au principal, le fichier CSS, et vous avez besoin de cela pour être une image de fond, alors je pense que vous êtes hors de la chance. Vous pouvez, cependant, le travail comme si votre conteneur div est la <body> du site, et de mettre tout votre contenu dans un div à l'intérieur de votre conteneur div (sauf pour l'image de fond). Vous pouvez utiliser un rembourrage ou des marges négatives. Avec overflow: visible;, votre image sera plus grande que le div, mais si elle fonctionne comme l'image d'arrière-plan pour l'ensemble de la <body> ou pas est une autre question. Il est difficile de savoir sans accès à l'ensemble de l'HTML/CSS.
    Aussi par marge en fait je veux dire padding-left et padding-right de 17,5%. Désolé pour la confusion, le cerveau est frit!
    Si le parent utilise padding au lieu de margin, essayez de régler votre div avoir position: absolute;. Cela devrait ignorer le remplissage du conteneur parent.
    Je pense que cette dernière observation est la solution. Avec z-index :-1.

    OriginalL'auteur TylerH