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 {

Here is my single.php

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(); ?>
<?php endwhile;
else :
echo '<p>No content found</p>';


Here is my header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_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()
)); ?>

  • Do you have a wrapper around all that content? Probably from your header.php
    – ngearing
    Dec 21 '16 at 4:04
  • No I don't think I do. I put my header.php in my original question. Dec 21 '16 at 14:07

Use the following CSS to target only the banner image on single posts:

body.sinlge .size-banner-image {

This will only work if your <div class="container"> element is not restricted in its width, else the banner will only stretch to the container width.

  • How would I make sure it is not restricted in width? Should I change Dec 21 '16 at 14:35
  • add_image_size('banner-image', 9999, 9999, true); Dec 21 '16 at 14:36
  • The sizes in add_image_size() only determines to what size the image file is cropped, it doesn't set how the file will be presented. To check if the container element is restricted in with use the developer tools in your browser.
    – JHoffmann
    Dec 21 '16 at 14:41
  • My container is not restricted, but the above code still doesn't work. Dec 21 '16 at 15:24
  • Actually I think it is restricted, how would I make it not restricted? Dec 21 '16 at 15:27

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.