Title: Header image responsive?
Last modified: August 24, 2016

---

# Header image responsive?

 *  [paulinelephew](https://wordpress.org/support/users/paulinelephew/)
 * (@paulinelephew)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/header-image-responsive-3/)
 * Hi,
 * I’d like to make the header image responsive so it shows properly on tablets 
   and smartphones.
 * I tried the following lines in custom CSS, without success:
 * .site-header {
    background-size: 100% 100% !important; }
 * Does anyone know how to make the header responsive please?
 * The site’s address is [http://www.cameleonfactory.com/wordpress/](http://www.cameleonfactory.com/wordpress/)
 * Thanks in advance!
 * Pauline

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

 *  [waterwhipper](https://wordpress.org/support/users/waterwhipper/)
 * (@waterwhipper)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/header-image-responsive-3/#post-5984565)
 * Hi there, I had the same issue and the solutions I found that resized the image
   kept distorting it and made it look a bit pants. I adapted the recommended code
   to change the whole image at certain screen widths which has made the site look
   much better especially at the lower (400px) widths when the theme goes into a
   single column.
 * The code I used is below, you will need to fiddle with sizes to get it looking
   right.
 *     ```
       @media screen and (max-width: 768px) {
          #masthead {
          	margin-bottom: 300px;
          }
          #parallax-bg {
               background-repeat: no-repeat;
       	background-size: 768px 300px;
          }
       }
   
       @media screen and (max-width: 767px) {
          #masthead {
               height: 200px;
          	margin-bottom: 100px !important;
          }
           #parallax-bg {
               background-image: url(YOUR IMAGE URL HERE.jpg) !important;
                background-repeat: no-repeat;
                background-size: 458px 131px;
                margin-top: 120px;
       }
   
       @media only screen and (max-width: 400px) {
          #masthead {height: 400px;
                padding_top: 20px;
                margin-bottom: 30px  !important;
          }
          #parallax-bg {
               background-image: url(YOUR IMAGE URL HERE.jpg) !important;
               background-repeat: no-repeat;
               background-size: 312px 264px;
               margin-top: 120px;
        }
       }
       ```
   
 * You can see it in action here: [Gooseberry Design](http://www.gooseberry-design.co.uk)
 * HTH
 *  Thread Starter [paulinelephew](https://wordpress.org/support/users/paulinelephew/)
 * (@paulinelephew)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/header-image-responsive-3/#post-5984595)
 * Hi and thanks for your answer,
 * unfortunately that doesn’t work for me for some reason.
 * You made 3 different headers right? one in 1500 px width, one in 767px and one
   in 400px?
 * I put the urls in the code in custom css but nothing changes, I still have an
   horrible bg repeat in tablet size and a squeezed image in smartphone size.
 * If you could help again, that’d be wonderful!
 * Thanks in advance,
 * Pauline
    ps: url has changed to [http://www.fix-dessinateur.com](http://www.fix-dessinateur.com)

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

The topic ‘Header image responsive?’ 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/)

## Tags

 * [header](https://wordpress.org/support/topic-tag/header/)
 * [logo](https://wordpress.org/support/topic-tag/logo/)

 * 2 replies
 * 2 participants
 * Last reply from: [paulinelephew](https://wordpress.org/support/users/paulinelephew/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/header-image-responsive-3/#post-5984595)
 * Status: not resolved