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?
<div>
,<img>
,<a>
, etc. So whatever you're adding the$src
variable to, just add the class to that, otherwise try using CSS. – Howdy_McGee♦ Aug 20 '15 at 14:06