Title: responsive header image
Last modified: March 12, 2017

---

# responsive header image

 *  [meisfit](https://wordpress.org/support/users/meisfit/)
 * (@meisfit)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-17/)
 * Hi there, I have been searching the whole net and through the forums but all 
   the css code snippets provided did not work. I want my header image to be responsive,
   i.e. get smaller with the decreasing screen size but still completely visible
   as it is on a desktop device. The website I am talking about is [http://www.riseshinesliprepeat.com](http://www.riseshinesliprepeat.com).
   I would like to have it the same way as it is on [http://www.copperstonesea.com](http://www.copperstonesea.com).
   By now, it cuts off the right side of the header image, I have already read that
   its just not a good idea to include text on the header image, but maybe theres
   a work around, or at least an alternative/trade off? Also deactivated and tested
   several plug ins.
 * The name of the theme I took was “stone”
    -  This topic was modified 9 years, 3 months ago by [meisfit](https://wordpress.org/support/users/meisfit/).

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

 *  [csloisel](https://wordpress.org/support/users/csloisel/)
 * (@csloisel)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-17/#post-8905330)
 * Try:
 *     ```
       .site-header-image .site-header-image-img {
           width: 100%;
           object-fit: contain;
       }
       ```
   
 * Text isn’t great to have in an image because it is static,and it can’t be changed
   dynamically. So when the image is scaled down, the text is as well, and there’s
   nothing you can do in that situation to change it. Alternative one would be doing
   the text in html/markup so that it can be styled differently on varying viewports.
   A second alternative would be to keep the image in text but have separate images
   per viewport that have an optimized layout and readability when scaled down.
 *  Thread Starter [meisfit](https://wordpress.org/support/users/meisfit/)
 * (@meisfit)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-17/#post-8905366)
 * wow, thanks a lot. The header image is alright now, but the menu and “Rise. Shine.
   Slip. Repeat.” are way too farr on the right now. Furthermore it is now asking
   if I want the mobile or the desktop version? I did not create any mobile version.
   Another thing is that you now can zoom in and out way too far by pinching.
 * Thanks again! But its not the way its intended to be yet :/
    Hope you/somebody
   can help out further.
    -  This reply was modified 9 years, 3 months ago by [meisfit](https://wordpress.org/support/users/meisfit/).
 *  Thread Starter [meisfit](https://wordpress.org/support/users/meisfit/)
 * (@meisfit)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-image-17/#post-8905382)
 * In case its easier or even not possible to do in css:
 * 1. How could I place the text in html/markup so that it is at the right spot?
   I then will only add the image without text?
 * 2. How to use separate images per viewport?
    -  This reply was modified 9 years, 3 months ago by [meisfit](https://wordpress.org/support/users/meisfit/).
 *  [blakshmi](https://wordpress.org/support/users/blakshmi/)
 * (@blakshmi)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-17/#post-9041230)
 * Hello…Could you help me with a custom css to fix my website? It is [http://www.apexbankonline.com](http://www.apexbankonline.com)
   and the header image repeats itself in the mobile version. I changed the header
   height and added css for “no-repeat” for the background image, but now the image
   is too small in the mobile and there is empty white space between the header 
   and the body slider. Thanks for your help in advance.

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

The topic ‘responsive header image’ is closed to new replies.

## Tags

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 3 participants
 * Last reply from: [blakshmi](https://wordpress.org/support/users/blakshmi/)
 * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-17/#post-9041230)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics