Multiple instances of Featured Image Thumbnail As A Background On Homepage

Question

Here's what I'm trying to do:

1. Make it so the first 6 posts are displayed differently on the homepage than posts 7 and on. The first six posts should grab their featured thumbnail images and use them as a background, then overlay the background with its title.
2. Posts 7~ have their own separate style, in this case, the post type and the post title.

I've gotten most of that to work, but the problem is the first six posts only one background image, which is the featured post image from the last of the six posts (same deal if I post 3 posts, it will pull the featured image thumbnail from the last, i.e. the third post).

What I want is for each post to pull their own featured image thumbnail and use that as the background image, so they're not all the same image ;)

Image Of What Happens: https://www.dropbox.com/s/3k8ngeukl59c0ff/Screen%20Shot%202014-09-08%20at%205.00.44%20PM.png?dl=0

The code I'm using:

<?php
if ( ( is_home() ) )
{ ?>

<div id="featured_area_2">

<?php if (have_posts()) : ?>
<?php $count = 1; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>

<?php if ($count > 7) : ?>
  <div style="clear: both;"></div>
  </div><!--featured_area_2-->
    <article class="post">
    <header class="entry-header">
      <h1 class="entry-title"><a href='/<?php echo get_post_type( $post ) ?>/'><span class='posttype <?php echo get_post_type( $post ) ?>type'><?php echo get_post_type( $post ) ?></span></a> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    </header>
    </article>

<?php else : ?>
    <a href="<?php the_permalink(); ?>"><div class="featured_box">
    <?php $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' ); ?>
    <h2><?php the_title(); ?></h2>
    </div></a>

    <style>
    .featured_box { background: url('<?php echo $background[0]; ?>') no-repeat center center; }
    </style>

<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

<?php }
?>

Any help would be much appreciated!

Answer 1

Solution was to remove the style tag and and write the background styling right into the .featured_box div. Thank you to @ckhicks on Twitter for the solution, and thank you everyone else for trying to help out too <3

 <?php $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' ); ?>
    <a href="<?php the_permalink(); ?>"><div class="featured_box" style="background: url('<?php echo $background[0]; ?>') no-repeat center center;">
    <h2><?php the_title(); ?></h2>
    </div></a>

Answer 2

The Problem

It's been awhile since I have messed with HTML, but if I remember correctly the <style> tags would be global. To elaborate: <style></style> would be as if you appended it to the end of your css file, but if you did something inline, such as <h2 style="color: red;">test</h2>, it would only be applied to that html element.

This would explain why the last article's image is the one that repeats. This would be occuring at the end of your else statement with:

<style>
    .featured_box { background: url('<?php echo $background[0]; ?>') no-repeat center center; }
    </style>

A possible solution:

(This could probably be done much cleaner, but I would imagine this would fix it)

<?php
if ( ( is_home() ) )
{ ?>

<div id="featured_area_2">

<?php if (have_posts()) : ?>
<?php $count = 1; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>

<?php if ($count > 7) : ?>
  <div style="clear: both;"></div>
  </div><!--featured_area_2-->
    <article class="post">
    <header class="entry-header">
      <h1 class="entry-title"><a href='/<?php echo get_post_type( $post ) ?>/'><span class='posttype <?php echo get_post_type( $post ) ?>type'><?php echo get_post_type( $post ) ?></span></a> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    </header>
    </article>

<?php else : ?>
    <a href="<?php the_permalink(); ?>"><div class="featured_box" id="featured<?php $count ?>">
    <?php $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' ); ?>
    <h2><?php the_title(); ?></h2>
    </div></a>

    <style>
    #featured<?php $count ?>.featured_box { background: url('<?php echo $background[0]; ?>') no-repeat center center; }
    </style>

<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

<?php }
?>

I had just added an id to your <div> that contains it all. Then, I added an id selector to your css style that is being added. Each id is just "featured" plus the current count of your loop.

P.S.: Sorry if this rather messy, first time actually posting on here. :)