Div with background image and centered content

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

2 questions : 1) the div containing the image must be the size of the image or be 100% width of window? 2) Do you realy need th image to be in the background? or can it be a `` tag? — web-tiki, May 13 '14 at 08:33
1. Well, basically I need an image covering full site width. I don't know actually, I guess 100% of window 2. No, it can be img tag. You propose use absolute position? — Victor, May 13 '14 at 08:37
But here you set 100% width and height of the body, but I don't know height or width. Like your first example but image there is several such blocks, what would you do? — Victor, May 13 '14 at 08:45
You are going to have to be more precise about the layout you are trying to achieve. If you have several blocks, you can do this : http://jsfiddle.net/webtiki/Dj7Hb/3/ — web-tiki, May 13 '14 at 08:50
http://themeforest.net/item/binder-corporate-html5-template/full_screen_preview/7648563 like here where WE LEAD THE WAY label is placed. Or BEST STUFF. But they set fixed height and also move background image, and I want to just put bg image as it is. BG image should have 100% width and corresponding height (takes ratio into account) — Victor, May 13 '14 at 09:01

score 1 · Accepted Answer · answered May 13 '14 at 09:18

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;
}

score 0 · Answer 2 · answered May 13 '14 at 11:13

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

Div with background image and centered content

2 Answers2