Title: Header covering content
Last modified: August 24, 2016

---

# Header covering content

 *  Resolved [youngjc345](https://wordpress.org/support/users/youngjc345/)
 * (@youngjc345)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/header-covering-content/)
 * I added a background image to my header. Everything seems fine on home page (
   [http://eventpro.ky](http://eventpro.ky)) but the header seems to cover the content
   on subpages ([http://eventpro.ky/events/platea-rhoncus-in-platea/](http://eventpro.ky/events/platea-rhoncus-in-platea/))
   any idea how to fix this?
    This is the CSS used to apply background image.
 * header.header {
    background: #262626; box-shadow: 0 0 20px rgba(0,0,0,0.4); background-
   image:url([http://eventpro.ky/wp-content/uploads/2015/05/banner-12.png](http://eventpro.ky/wp-content/uploads/2015/05/banner-12.png));
   background-repeat: no-repeat; background-position: top center; }
 * **THANKS**

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

 *  [christystjohn](https://wordpress.org/support/users/christystjohn/)
 * (@christystjohn)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/header-covering-content/#post-6166791)
 * The problem is that the position of your header is fixed. The code is in two 
   locations:
 *     ```
       @media only screen and (min-width: 800px)
       .single-ja-event header.header {
         position: fixed;
         width: 100%;
         z-index: 90;
         top: 0;
       }
       ```
   
 * and
 * ‘@media only screen and (min-width: 801px)
    header.header { position: fixed; 
   width: 100%; z-index: 21; }`
 * You need to change these instances to “position: relative” to make it behave 
   like the home screen. The reason that it’s not a problem on the home screen is
   because there is code specifically referencing the home screen header to make
   its position relative already.
 *  Thread Starter [youngjc345](https://wordpress.org/support/users/youngjc345/)
 * (@youngjc345)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/header-covering-content/#post-6166804)
 * **Thanks** It worked like a charm. However, now there is a little gap between
   the header and the subpage content. Any ideas?
 *  [christystjohn](https://wordpress.org/support/users/christystjohn/)
 * (@christystjohn)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/header-covering-content/#post-6166808)
 * Are you talking about the white space or the red space?
 * The white space is where the header should be, but it’s position is moved 123
   px.
 *     ```
       @media only screen and (min-width: 800px)
       .single-ja-event #menu_top_event {
         width: 100%;
         background: transparent url('../images/top_menu_search_event.png') repeat-x top left;
         height: 67px;
         margin-top: 0;
         position: relative;
         top: 123px; *********
         z-index: 89;
       ```
   
 * The red space is the padding on the #top-event
 *     ```
       @media only screen and (min-width: 800px)
       .single-ja-event #top_event {
         padding-top: 190px;
       ```
   
 *  Thread Starter [youngjc345](https://wordpress.org/support/users/youngjc345/)
 * (@youngjc345)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/header-covering-content/#post-6166986)
 * Perfect! **Thanks**

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

The topic ‘Header covering content’ is closed to new replies.

## Tags

 * [event theme](https://wordpress.org/support/topic-tag/event-theme/)

 * 4 replies
 * 2 participants
 * Last reply from: [youngjc345](https://wordpress.org/support/users/youngjc345/)
 * Last activity: [10 years, 11 months ago](https://wordpress.org/support/topic/header-covering-content/#post-6166986)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics