Title: Full Width Featured Image
Last modified: August 31, 2016

---

# Full Width Featured Image

 *  [simconnection](https://wordpress.org/support/users/simconnection/)
 * (@simconnection)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/full-width-featured-image-1/)
 * Hi, I am currently using the Tesseract theme and the newest version of WordPress.
   I have been using site origin to build pages but am reverting back to just the
   standard text editor.
 * I have been able to successfully add a featured image to my post pages with some
   tweaking of the php files in a child theme, but i have been unable to have a 
   full width (stretched across the full browser window) featured image. Does anyone
   know how I could make this happen. I am learning stuff my self, so my knowledge
   is pretty limited.
 * Here is a page that from my website, the top one is the one i added through php,
   the bottom is a full width through site origin widget. I am wanting the top to
   look like the bottom, preferably not with a full height. The specs for the bottom
   are 600px height.
 * [http://simconnection.net/2016/02/03/early-bird-access-will-give-players-full-access-to-planet-coaster-until-release/](http://simconnection.net/2016/02/03/early-bird-access-will-give-players-full-access-to-planet-coaster-until-release/)

Viewing 1 replies (of 1 total)

 *  [ikaring](https://wordpress.org/support/users/ikaring/)
 * (@ikaring)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/full-width-featured-image-1/#post-7457971)
 * I think the simplest way is to add 100% width div with the image as a background
   image.
    Put div with class name like ‘hero’ right before div#content like so;
 *     ```
       <div class="hero"></div>
       <div id="content" class="cf site-content">
       ```
   
 * Add css styles like:
 *     ```
       .hero {
         background: url('http://simconnection.net/wp-content/uploads/2015/09/12593991_359206020870201_3347543352591936245_o.jpg') no-repeat center top;/* Set path to your image */
         background-size: cover;
         height: 400px;/* Assign any height */
       }
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘Full Width Featured Image’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [ikaring](https://wordpress.org/support/users/ikaring/)
 * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/full-width-featured-image-1/#post-7457971)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics