Le positionnement d'une image derrière un centré div

Mon site a un 900px div #content qui est centré avec margin-left: auto et margin-right: auto. J'ai une image que j'ai besoin d'afficher derrière le div qui se chevauchent partiellement #content.

L'image est définie pour afficher le bloc à l'heure actuelle et je peux l'obtenir à l'endroit où il doit être, mais il ne permet pas #content pour dessiner sur l'image. Je peux obtenir #content pour afficher l'image avec position: absolute toutefois, cela empêche l'utilisation de la marge gauche /margin-right auto center.

Mon positionnement actuel, qui est l'endroit où il doit être:

img#watermark  
{
    margin-left: auto;  
    margin-right: auto;
    display: block;
    padding-left: 900px;
}

#content juste besoin d'apparaître sur le filigrane.

Aider grandement apprécié.

avez-vous essayé de jouer avec les z-index?
Si le contenu doit être au top, ne fonctionne pas de réglage de l'image en tant que fond de css?
Z-Index ne fonctionne pas malheureusement, et sans il y a déjà un arrière-plan de la page. Acclamations de toute façon.

OriginalL'auteur Sam | 2011-05-08

  1. 7

    html:

    <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
<div></div>

    css:

    div {
    margin:auto;
    width: 512px;
    height: 512px;
    background: rgba(0,0,0,.4);
    position: relative;
}
img {
    position: absolute;
    left: 50%;
    margin-left:-256px;
}

    http://jsfiddle.net/Db2cw/

    si vous avez d'autres éléments affectant jouer avec z-index (rappelez-vous: il s'applique uniquement aux position:relative or absolute).
    Ce que vous avez fourni ne fonctionne pas pour moi, cependant gauche à 50% était ce dont j'avais besoin pour obtenir que l'offset où il devait être. Des acclamations. Vous n'avez aucune idée combien de temps cela a été faire pour moi!

    OriginalL'auteur seler

  2. 0

    la solution est d'avoir un div #contenu de la div, et que surroinding div en position absolue et avec une largeur et une hauteur.

    Ex:

    html:

    <div id="outter">
<div id="image"><img src="something.jpg" /></div>
<div id="contentOutter">
<div id="content">the content here</div>
</div>
</div>

    CSS:

    #outter {
width: 1000px;
height: 300px;
position: relative;
}

#image {
width: 1000px;
height: 300px;
position: absolute;
}

#contentOutter {
width: 1000px;
height: 300px;
position: absolute;
}

#content {
margin: 0 auto;
width: 900px;
}

    Exemple ici: http://jsfiddle.net/qwEhv/

    Merci pour l'effort, mais cela ne fonctionne pas. J'ai utilisé cette image aléatoire j'ai trouvé qui était plus petite que ce que vous aviez vous - jg.msdpt.k12.in.us/staff/Huckaby/splat.gif - et il ne semble pas le droit - il a été aligné à gauche.

    OriginalL'auteur jackJoe

  3. 0

    "Je peux obtenir #contenu à afficher sur l'image avec position: absolute toutefois, cela empêche l'utilisation de la marge gauche /margin-right auto center".

    Ce que vous devez faire ici est d'avoir une div - appelons - #contentWrapper par exemple et le centre à l'aide de la marge de droite et de gauche, de définir la position relative. Mettre la div #contenu à l'intérieur de l'emballage de la div et de la position absolue. Cela devrait vous permettre de faire des #regarder le contenu centré.

    OriginalL'auteur boug