带有背景图片和居中内容的Div

Question

I need to make a div with background image of unknown size. Inside this div I need some content in the middle.

The problem is that I don't know the background image size.

I've found 2 solutions but I can't get it work together. First, how to automatically adjust div width/height ad its background:

<div style="background:url(...); background-size: contain;">
    <img src="the_same_url" style="visilibity: hidden;">
</div>

Second how to vertically align How to vertically align an image inside div

And also the content should be wrapped in wrapper (width: 960px; margin: 0 auto); I cannot get it work together at all =\\

So basically this thing is needed in order to create a block with some big background which will take 100% width of site and in the center there will be some content. But the size of this block will depend on background image

Also I can use jQuery but I can't figure out how

Answer 1

You can do this with position:absolute; and display:table / display:table-cell; .

FIDDLE

HTML:

<div class="wrapper">
    <img src="YOUR_IMAGE" />
    <div class="content">
        <div>
            <div>
                 blahblab
            </div>
        </div>
    </div>
</div>

CSS:

.wrapper {
    width:960px;
    margin:0 auto;
    position:relative;
}
.wrapper > img {
    width:100%;
    height:auto;
}
.content {
    top:0;
    position:absolute;
    width:100%;
    height:100%;
}
.content > div {
    display:table;
    width:100%;
    height:100%;
}
.content > div > div {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

Answer 2

Not sure if I understood your situation completely but would this work?

HTML:

<div id="wrapper">
  <div id="background">
     <img src="http://lorempixel.com/400/200/sports/">
  </div>
</div>

CSS:

#wrapper {
    margin: 0 auto;
    width: 960px;
}

#background {
    background: #ddd url('http://lorempixel.com/400/200/sports/') no-repeat;
    background-size: cover;
    background-position: center;
    display: block;
    text-align: center;
    width: 100%;
    height: auto;
}

#background img {
    display: inline-block;
}

Here's the pen: http://codepen.io/andyngo/pen/seanA