WP-Foundation (by 320press) Orbit Slider with background-image - php

Question

The thing I want to do here, is adding the post-thumbnails of the blogposts as background-image into the built in Orbit slider within 320press WP-Foundation Wordpress-theme.
First thing said, is that I don't know how to code PHP. I just wanted to do this little tweak to make the design look nicer.
My code:
<?php
global $post;
$tmp_post = $post;
$args = array( 'numberposts' => 5 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post);
$post_thumbnail_id = get_post_thumbnail_id();
$featured_src = wp_get_attachment_image_src( $post_thumbnail_id, 'wpf-home-featured');
?>
<div style="background-color: #F2F2F2; background-size:cover; background-image: url(<?php echo wp_get_attachment_image_src($post_thumbnail_id); ?>);">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
<p>Read More »</p>
</div>
<?php endforeach; ?>
That's the whole code, now onto the part I have problems with:
`<div style="background-color: #F2F2F2; background-size:cover; background-image: url(<?php echo wp_get_attachment_image_src($post_thumbnail_id); ?>);">`
As you can see, I try to get the image source and make it the background-image.
I have no clue how to solve this problem, so, in advance, thanks for your help!

Answer 1

The documentation for wp_get_attachment_image_src reveals the problem. This function returns an array, containing the url, width, and height of the image. Also, the second argument it accepts is the output size of the image. Since you are using it with background-size:cover, I presume you want the image to be full resolution.
In order to output the proper background-url instead array(), change your echo in the background div to $featured_src[0]:
<div style="background-color: #F2F2F2; background-size:cover; background-image: url(<?php echo $featured_src[0]; ?>);">
To make the background-image full resolution, change the second argument on the $featured_src line to 'full':
$featured_src = wp_get_attachment_image_src( $post_thumbnail_id, 'full');

Answer 2

Try changing it to
background-image: url('<?php echo $featured_src; ?>')