Title: Need Responsive or Alternate Header Virtue
Last modified: August 31, 2016

---

# Need Responsive or Alternate Header Virtue

 *  [sunshowerbiz](https://wordpress.org/support/users/sunshowerbiz/)
 * (@sunshowerbiz)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-virtue/)
 * (Note I am a newbie to this forum and had posted this question last week but 
   I kept updating my post so I think it was overlooked because it may have appeared
   it was being replied to. I marked it resolved because I could not delete it. 
   My apologies.)
 * I am using a test page for this problem, which is I need the headerclass image
   to be responsive. I added custom CSS but the headerclass image is so small it
   is not effective when viewed on a phone. Here is the test page:
 * [http://www.lifepathbydesign.net/temp/](http://www.lifepathbydesign.net/temp/)
 * The code I added to the custom CSS to this page is:
 *     ```
       .page-id-xx .headerclass {
       height: 250px;
       background: #fff
       url(http://www.lifepathbydesign.net/wp-content/uploads/2016/02/BlogBanner.jpg);
       width: 100%;
       background-size: 100% auto !important;
       }
       ```
   
 * I am guessing I need to have an image that is taller and narrower display on 
   small-screened devices, so two images. Is this correct? I am only displaying 
   header image on the blog pages now, but plan is for the non-blog pages I want
   a different header image.
 * *Because I only wanted the headerclass image on the blog pages,I had added CSS
   to not display the headerclass and am using the pageids/postids, to display the
   blog image header on the blog pages and posts. So I am not sure how to work around
   it especially to display two different images, one for blog pages, one for the
   rest **_and_** different sizes of each on phone sized screens. Here is the code
   I used to prevent the header from displaying on all pages
 *     ```
       .headerclass {
       background: url(none);
       width: 100%;
       background-repeat: no-repeat;
       }
       ```
   
 * Please help.
    Thank you.

The topic ‘Need Responsive or Alternate Header Virtue’ is closed to new replies.

## Tags

 * [header background](https://wordpress.org/support/topic-tag/header-background/)
 * [kadence themes](https://wordpress.org/support/topic-tag/kadence-themes/)
 * [phone](https://wordpress.org/support/topic-tag/phone/)

 * 0 replies
 * 1 participant
 * Last reply from: [sunshowerbiz](https://wordpress.org/support/users/sunshowerbiz/)
 * Last activity: [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-header-virtue/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics