Title: Responsive Header Image
Last modified: August 21, 2016

---

# Responsive Header Image

 *  Resolved [match858](https://wordpress.org/support/users/match858/)
 * (@match858)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-4/)
 * Hi
 * Theme looks great, nice and clean. I’m looking for your help on an issue please.
 * I’d like the header image to be responsive and to remove the repeat of the image.
   How is this possible? I cannot find any reference in the files.
 * Thank you.

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

 *  Theme Author [ThemeGrill](https://wordpress.org/support/users/themegrill/)
 * (@themegrill)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-4/#post-4665055)
 * [@match858](https://wordpress.org/support/users/match858/) Thanks for your feedback
   on the theme. I really appreciate it.
 * About the responsiveness of the header image. The header image is actually used
   as a parallax image so the height is like kind of constant in every devices. 
   It is usually like that in parallax design. If you want to make the width change
   according to device width you could use the following css in Appearance->Customize-
   >Custom CSS and click on ‘Save and Publish’ button. However, it will look like
   kind of compressed image in small devices, I personally don’t recommend this.
   `#
   parallax-bg { background-size: 100% 100%; }`
 * About the repeat part it is actually quite easy, you can append one more line
   in above css.
    `#parallax-bg { background-size: 100% 100%; background-repeat:
   no-repeat; }`
 * Hope this helps. If you have any further queries you can also put your query 
   in our dedicated forum here [http://themegrill.com/support-forum/](http://themegrill.com/support-forum/).
 *  Thread Starter [match858](https://wordpress.org/support/users/match858/)
 * (@match858)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-4/#post-4665094)
 * Thanks for the info. Is there a way to keep the header image within the bounds
   of the content width?
 *  Theme Author [ThemeGrill](https://wordpress.org/support/users/themegrill/)
 * (@themegrill)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-4/#post-4665110)
 * You can try this css
    `#parallax-bg { background-size: 100% 100%; }` that I provided
   above. This will fit the header image to the content of the device viewed on.
   If you want to further decrease the size of the width. You can try this css
 *     ```
       #parallax-bg {
           background-repeat: no-repeat;
           background-size: 90% 100%;
       }
       ```
   
 * You can change the 90% value according to your liking.
 *  Thread Starter [match858](https://wordpress.org/support/users/match858/)
 * (@match858)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-4/#post-4665121)
 * Hi and thanks again.
 * What I want to achieve is a fixed size image without repeat down to 1000px screens
   and then a 100% sized image on screens below 1000px. I have used the following
   css in my child theme stylesheet.
 * #parallax-bg {
    background-size: 1000px; background-repeat: no-repeat; margin-
   top: 64px; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}
 * [@media](https://wordpress.org/support/users/media/) screen and (max-width: 999px){
   #
   parallax-bg { background-size: 100%; } }
 * This achieves the look I was after down to 1000px, but does not make the image
   responsive after 1000px.
 * Any help would be appreciated.
 *  Theme Author [ThemeGrill](https://wordpress.org/support/users/themegrill/)
 * (@themegrill)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-4/#post-4665132)
 * I tried your css and it works fine as you want it. I can see that upto 1000px
   the image appears to be same but below that it is being responsive as both width
   and height are decreasing when you decrease the browser size below 1000px. I 
   added your css in the Custom CSS option of the customizer to check on it.
 *  Thread Starter [match858](https://wordpress.org/support/users/match858/)
 * (@match858)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-4/#post-4665139)
 * Oh yes, its strange that it doesn’t work from the child css but it does from 
   the customiser.
 * 1 last question if I may? When the image rescales on smaller screens the container
   remains the same size and leaves a large space beneath the image before the content.
   Is there a way this can respond too?
 *  Theme Author [ThemeGrill](https://wordpress.org/support/users/themegrill/)
 * (@themegrill)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-4/#post-4665145)
 * Actually, this css
 *     ```
       #masthead {
           margin-bottom: 418px;
       }
       ```
   
 * is responsible for the white space. The value 418px may be different as per the
   size of your header image. For this to be decreasing as the per the image size
   it would need javascript and that might be difficult. So, what you could do is,
   use media queries like above for different device width and control the margin-
   bottom for the masthead selector.
 *  Thread Starter [match858](https://wordpress.org/support/users/match858/)
 * (@match858)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-4/#post-4665146)
 * Thank you, great support.
 * I’ll look into the js resolution in the long run but for now I’ve used the media
   queries as suggested.
 *  Theme Author [ThemeGrill](https://wordpress.org/support/users/themegrill/)
 * (@themegrill)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-4/#post-4665153)
 * You are welcome. We would really appreciate it if you could add a review for 
   our theme. 🙂
 *  Thread Starter [match858](https://wordpress.org/support/users/match858/)
 * (@match858)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-4/#post-4665173)
 * [@themegrill](https://wordpress.org/support/users/themegrill/) Is there a way
   we can chat privately?
 *  Theme Author [ThemeGrill](https://wordpress.org/support/users/themegrill/)
 * (@themegrill)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-4/#post-4665175)
 * You can contact us via our contact us page here [http://themegrill.com/contact/](http://themegrill.com/contact/).
 *  [stevoo](https://wordpress.org/support/users/stevoo/)
 * (@stevoo)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-4/#post-4665316)
 * hi all,
    nice theme, pls id like to have a image slider on the header image specifically
   meta slider, so id av multiple images on my header. pls any help?

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

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

 * ![](https://i0.wp.com/themes.svn.wordpress.org/radiate/1.4.3/screenshot.jpg)
 * Radiate
 * [Support Threads](https://wordpress.org/support/theme/radiate/)
 * [Active Topics](https://wordpress.org/support/theme/radiate/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/radiate/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/radiate/reviews/)

 * 12 replies
 * 3 participants
 * Last reply from: [stevoo](https://wordpress.org/support/users/stevoo/)
 * Last activity: [12 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-4/#post-4665316)
 * Status: resolved