add class to background image

Question

I'm trying to make a wordpress theme, using as framework the twitter bootstrap. On one page template I need to use the featured image as a background image, so I used this code:

<?php
global $post;
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
?>
<div class="mainblogwrapper img-responsive img-center" style="background-image: url(<?php echo $src[0]; ?> ) !important; background-attachment : fixed;">

Everything looks great but I only have one problem. The image will not center for different screen sizes. (I see the whole image on 1920X1080 screen, but only the left of it on mobile screen).

I use the img-responsive and img-center classes but it is still not showing properly.

Check the website here http://aspalisvillas.com/

How can I make the background image to show properly? How to make it responsive?

Answer 1

I have added the style "background-position: center center;" and it work perfectly!

So the new code will look like this:

<?php
    global $post;
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
?>
<div class="mainblogwrapper" style="background-image: url(<?php echo $src[0]; ?> ) !important; background-attachment : fixed;background-position: center center;">