Styling a background image. Wordpress, php.

Question

I'm using Wordpress and I'm currently trying to add a width to an image that's being brought in as a background image, but I can't seem to do so...

The image is at the top of the page here: http://ideedev.co.uk/newseed/brand/ I have the text working the way I would like (centre and middle by using vertical align and a dimply:table; and table cell), the the image in the background seems to be full size but I would like to make it the same width as the container it is a background of...

For reference, the full image looks like this:

Im using the page's Featured Image, so to enable this to be pulled into the background, I've had to use some PHP, so here's the code displaying the image and the text:

<?php if ( has_post_thumbnail() ) {

    // Get the post thumbnail URL
    $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
  } else {

    ?>
    <style type="text/css">.featured-image{
    display:none;
    }</style>
    <?php
  } ?>


    <div id="absolute1111" style=" background: url(<?php echo $feat_image; ?>);">
        <div class="centerd1111">
            <h1><?php the_title(); ?></h1>
        </div>
    </div>  

My styles are as follows:

#absolute1111 {
    position:relative;
    width:100%;
    height:50%;
    display:table;
    color: #fff;
}

.centerd1111 {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    height:500px;
    padding: 0 50px 0 50px;
}

Hopefully someone will be able to help :) Thanks for looking.

Answer 1

If I am understanding you correctly, this is what you would like:

#absolute1111 {
   position:relative;
   width:100%;
   height:50%;
   display:table;
   color: #fff;
   background-size: contain;
   background-repeat: no-repeat;
   background-color: #274c55;
   background-position-x: 50%; # See comments below about standards
}

And it looks like this:

Answer 2

I am a bit unclear. i think you can add following to css:

#absolute1111 {
    position:relative;
    width:100%;
    height:50%;
    display:table;
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
}