Title: Responsive Header image
Last modified: September 1, 2016

---

# Responsive Header image

 *  [flatrock](https://wordpress.org/support/users/flatrock/)
 * (@flatrock)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-header-image-14/)
 * Still having some difficulty getting the Header image to be FULLY responsive,
   on both mobile and desktop situations.
    I could set the CSS width to 100% but
   all I get is a distortion of the image horizontally only. Is there a way to make
   the entire image respond equally?
 * .header-bg {
    height: 260px; padding: 0 0; background-size: 100% 100% }
 * I tried this too, to no avail;
 * .header-bg {
    height: 100%; padding: 0 0; background-size: 100% 100% }
 * The logo option works fine, and is responsive, but I need to have varying header
   images per page, so the only option there is using Header images, not logo images.
 * Any advice is very much appreciated!
 * [http://www.marbleheadhistory.org/Mhead1629](http://www.marbleheadhistory.org/Mhead1629)

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

 *  [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * (@jaycbrf)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-header-image-14/#post-7472279)
 * Change background-size to “cover”
 *  Thread Starter [flatrock](https://wordpress.org/support/users/flatrock/)
 * (@flatrock)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-header-image-14/#post-7472365)
 * no go, but thanks.
 *  Theme Author [Styled Themes](https://wordpress.org/support/users/gejay/)
 * (@gejay)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-header-image-14/#post-7472427)
 * Hi There,
 * As it is background image it is responsive, due to the responsiveness the image
   has been compressed and if you remove the responsiveness then your image can 
   be cut off in mobile and tablets. And we have kept the code like this to make
   it responsive;
 *     ```
       .header-bg {
           background-size: 100% 100%;
       }
       ```
   
 * And if you reduce or remove the code then you image looks like the attached image.
   We hope you understand.
    [http://prntscr.com/bgm6i0](http://prntscr.com/bgm6i0)
 * Thanks
 *  Thread Starter [flatrock](https://wordpress.org/support/users/flatrock/)
 * (@flatrock)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/responsive-header-image-14/#post-8203083)
 * Still struggling with this, hope you can help? The Header image is still only
   responsive in one direction using the following CSS
 * .header-bg {
    background-size: 100% 100%; }
 * What can I do to make it fully responsive in both x and y axis? Is there something
   in the header.php or logo-group.php files I can adjust too?
 * [http://www.marbleheadhistory.org/Mhead1626](http://www.marbleheadhistory.org/Mhead1626)
   is the site in progress, thanks for any help!!

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

The topic ‘Responsive Header image’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/pure-simple/3.3.0/screenshot.png)
 * Pure & Simple
 * [Support Threads](https://wordpress.org/support/theme/pure-simple/)
 * [Active Topics](https://wordpress.org/support/theme/pure-simple/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/pure-simple/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/pure-simple/reviews/)

 * 4 replies
 * 3 participants
 * Last reply from: [flatrock](https://wordpress.org/support/users/flatrock/)
 * Last activity: [9 years, 8 months ago](https://wordpress.org/support/topic/responsive-header-image-14/#post-8203083)
 * Status: not resolved