Make image full width

I am trying to make the featured image full width in my wordpress theme. I want it so that when you go to the individual posts page the featured image is full width at the top. (similar to (http://www.fashionmumblr.com/2016/12/12-days-vlogmas-giveaways.html) Does anyone have any suggestions for how I could achieve this?

        add_image_size(\'banner-image\', 9999, 9999, true);

and css

.banner-image img {
width:100%;
}

Here is my single.php

<?php
get_header();
the_post_thumbnail(\'banner-image\');
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">

<?php wpb_set_post_views(get_the_ID()); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo \'<p>No content found</p>\';
endif;
get_footer();

?>

Here is my header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo(\'charset\'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo(\'name\'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container">
<!-- site-header -->
<header class="site-header">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo(\'name\'); ?></a></h1>
<h5><?php bloginfo(\'description\'); ?></h5>


        <?php wp_nav_menu(array(
\'menu\' => \'Primary Menu Links\', 
\'container_id\' => \'cssmenu\', 
\'walker\' => new CSS_Menu_Walker()
)); ?>

    </header>

小码农CODE

相关推荐

Images with overlay