Title: Hero Header Section
Last modified: September 13, 2019

---

# Hero Header Section

 *  Resolved [Elkerton](https://wordpress.org/support/users/elkerton/)
 * (@elkerton)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/hero-header-section/)
 * Greetings. Using the Atomic Blocks theme, I added the Hero Header Section to 
   the top of my Home Page, but the image is not stretching to the full width of
   the screen. How do I make the width of the image fill the screen? Thank you
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fhero-header-section%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [madison4atx](https://wordpress.org/support/users/madison4atx/)
 * (@madison4atx)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/hero-header-section/#post-11932032)
 * When inspecting the page, i noticed the amp plugin is setting a css value on 
   the image of:
 * `object-fit: contain;`
 * Visible in this image [https://imgur.com/a/QVBqMcT](https://imgur.com/a/QVBqMcT)
 * If that css rule is taken out of the equation the image then fill’s the full 
   width of the page, as evident in this image: [https://imgur.com/a/9Hrqbcs](https://imgur.com/a/9Hrqbcs)
 *  Thread Starter [Elkerton](https://wordpress.org/support/users/elkerton/)
 * (@elkerton)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/hero-header-section/#post-11933114)
 * That is brilliant – thank you! I actually added the following custom CSS:
 * `object-fit: cover;`
 * This allowed the image to fill the header without stretching.
 *  [madison4atx](https://wordpress.org/support/users/madison4atx/)
 * (@madison4atx)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/hero-header-section/#post-11937585)
 * Ah good call, setting it to `cover` looks even better! Great job!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Hero Header Section’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/atomic-blocks_ded9f7.svg)
 * [Atomic Blocks - Gutenberg Blocks Collection](https://wordpress.org/plugins/atomic-blocks/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/atomic-blocks/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/atomic-blocks/)
 * [Active Topics](https://wordpress.org/support/plugin/atomic-blocks/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/atomic-blocks/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/atomic-blocks/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [madison4atx](https://wordpress.org/support/users/madison4atx/)
 * Last activity: [6 years, 8 months ago](https://wordpress.org/support/topic/hero-header-section/#post-11937585)
 * Status: resolved