0

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?

Improve this question
2
  • You can't add a class to a background image. You can add a class to an element such as <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
  • Thank you for your comment. Please check my edited question, I have posted the code. – BigDropGR Aug 20 '15 at 17:26
0

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;">
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.