Title: Responsive Header Imag
Last modified: October 21, 2023

---

# Responsive Header Imag

 *  Resolved [elektrobusse1](https://wordpress.org/support/users/elektrobusse1/)
 * (@elektrobusse1)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/responsive-header-imag/)
 * Hello, i have the problem that my header image is not responsive when dealing
   with different screen sizes.
   How can i make it responsive like all the other 
   ones?I tried different media query approaches but all only affects the div .custom-
   header img but the image stays at same fixed size 2000×1200, because of position:
   fixed.I guess it is not intended to be responsive at all?Thanks in advance
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fresponsive-header-imag%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [Ina](https://wordpress.org/support/users/inamoro/)
 * (@inamoro)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/responsive-header-imag/#post-17144518)
 * Hi, [@elektrobusse1](https://wordpress.org/support/users/elektrobusse1/)
 * Add the following code to Appearance -> Customize -> Additional CSS:
 *     ```wp-block-code
       @media screen and ( max-width: 768px ) {.has-header-image .custom-header-media img {object-fit: contain;}}
       ```
   
 *  Thread Starter [elektrobusse1](https://wordpress.org/support/users/elektrobusse1/)
 * (@elektrobusse1)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/responsive-header-imag/#post-17145104)
 * Thanks indeed this works but, it is the same as setting position:relative.
   The
   black bars above and down are visible.
 *  [Pavel Ciorici](https://wordpress.org/support/users/ciorici/)
 * (@ciorici)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/responsive-header-imag/#post-17145931)
 * [@elektrobusse1](https://wordpress.org/support/users/elektrobusse1/)
 * Please update your theme to the latest version.
 * After that, add this CSS code in the Customizer and remove the code you added
   previously:
 *     ```
       @media screen and (min-width: 48em) {
       .admin-bar.inspiro-front-page.has-header-image .custom-header-media, .admin-bar.inspiro-front-page.has-header-video .custom-header-media {
           height: auto !important;
       }
   
       }
       .has-header-image.home.blog .custom-header, .has-header-image.inspiro-front-page .custom-header, .has-header-video.home.blog .custom-header, .has-header-video.inspiro-front-page .custom-header {
           height: auto;
       }
   
       .custom-header-media {
           position: relative;
           min-height: 0;
       }
   
       .has-header-image .custom-header-media img {
           height: auto;
           display: block;
           min-height: 0;
       }
       ```
   
 * If this still doesn’t work, we recommend you remove the text from your image 
   or place it in the middle of the image. You can find more tips here:
    [https://www.wpzoom.com/docs/recommendations-themes-full-width-sliders/](https://www.wpzoom.com/docs/recommendations-themes-full-width-sliders/)
 *  Thread Starter [elektrobusse1](https://wordpress.org/support/users/elektrobusse1/)
 * (@elektrobusse1)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/responsive-header-imag/#post-17147976)
 * Thanks this helped but there are still some issues with black bars. 
   For me it
   would be sufficient if i do not have an header background image at all but i 
   still want to have an image as the top content over the whole screen width and
   beginning under the nav bar. Do you have a tipp on how i can achieve this. (Remove
   header image – ok, create an image block on startsite page – ok (but this does
   not fit over whole screen width and begins not under the navbar but on top of
   page)

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

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

 * ![](https://i0.wp.com/themes.svn.wordpress.org/inspiro/2.2.0/screenshot.png)
 * Inspiro
 * [Support Threads](https://wordpress.org/support/theme/inspiro/)
 * [Active Topics](https://wordpress.org/support/theme/inspiro/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/inspiro/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/inspiro/reviews/)

## Tags

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

 * 4 replies
 * 3 participants
 * Last reply from: [elektrobusse1](https://wordpress.org/support/users/elektrobusse1/)
 * Last activity: [2 years, 7 months ago](https://wordpress.org/support/topic/responsive-header-imag/#post-17147976)
 * Status: resolved