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

---

# Responsive Header Image

 *  Resolved [razorpig](https://wordpress.org/support/users/mjtilbury/)
 * (@mjtilbury)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/responsive-header-image-10/)
 * Hello all,
 * On the following site :
 * [http://razorweb.co.uk/](http://razorweb.co.uk/)
 * …when device size drops below 640px the header image gets squashed. I’d like 
   the text and the height to remain the same size so just the empty yellow space
   on the right hand side of the banner narrows. I don’t want the yellow banner 
   to go beyond the grey navigation bar beneath. Any ideas?

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

 *  [jc62](https://wordpress.org/support/users/jc62/)
 * (@jc62)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/responsive-header-image-10/#post-6115314)
 * I am not a css expert, but it appears that the img tag style sets the “min-width:
   460px”. When you change the user agent width to less than 640px, the image is
   resized and “squashed” as you stated. I think if you were to set the min-width:
   to something around 640px, your image would not get “squashed”.
 *  Thread Starter [razorpig](https://wordpress.org/support/users/mjtilbury/)
 * (@mjtilbury)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/responsive-header-image-10/#post-6115324)
 * Hi jc32, Thanks for the reply. I tried this previously, but the header then extends
   beyond the navigation bar below a certain width (around 770px). I’ve changed 
   it so you can see what’s happening…
 * [http://www.razorweb.co.uk](http://www.razorweb.co.uk)
 *  [jc62](https://wordpress.org/support/users/jc62/)
 * (@jc62)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/responsive-header-image-10/#post-6115455)
 * Marcus,
    I was thinking you could likely use 2 images, and have css select the
   appropriate image based on width. You could then generate an image for smaller
   devices that would fit your requirements. I know this would be a lot of work,
   but it may work. The steps would include:
    - [create a child theme with only 2 files(I think)](https://codex.wordpress.org/Child_Themes)
    - create a css class in your child theme that references the two images
    - reference the new class withing the wordpress page.
 * [Here is a link that discusses the topic.](https://css-tricks.com/replace-the-image-in-an-img-with-css/)
 *  Thread Starter [razorpig](https://wordpress.org/support/users/mjtilbury/)
 * (@mjtilbury)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/responsive-header-image-10/#post-6115521)
 * Thanks jc32, I appreciate the reply. Looks like an excellent solution. I’ll definitely
   be using that information in the future – in the meantime, all is now working
   fine. Big thanks again for the reply.

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

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 2 participants
 * Last reply from: [razorpig](https://wordpress.org/support/users/mjtilbury/)
 * Last activity: [10 years, 11 months ago](https://wordpress.org/support/topic/responsive-header-image-10/#post-6115521)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics