Positioning Header Background Image in Skin

resolved (10 posts) (2 voices)

  1. I am trying to customize an inFocus skin to show a background image in the header. I am having some difficulty making the positioning options work correctly.

    As a test I have created custom css to change the header size to 300px. I have uploaded a 2,000 x 200px image as the header background in the skin. Left Top, Right Top, and Center Top work as expected. If I try any of the bottom settings, only the top edge of the background is visible. If I try to center the image vertically, the image is not centered vertically; it acts like the header is 400-500px high.

    What is going on?

    Posted 3 years ago #
  2. Elliott

    Hello mikeschumann,

    Send us a link and take a screenshot highlighting what your trying to do.

    Posted 3 years ago #
  3. Take a look at test.mnbreakfast.org. The header area is 150px high. The header image is 1600x150px. I have set it up in the skin to be Left Center.

    If I set it up as left top it displays correctly. However, when I have it set up as left top, when I scroll down the page, the header background image does not scroll (the "MN Men's Breakfast" title does), which is also confusing.

    Any help would be appreciated.



    1. inFocus_Header_Image_copy.jpg (109.1 KB, 6 downloads) 3 years old
    Posted 3 years ago #
  4. Elliott

    So your wanting the header to scroll along with the page instead of having an absolute position?

    The CSS for that would look like so,

    #header { position: fixed !important; }

    Posted 3 years ago #
  5. There are two problems:

    1. When I modify a skin to add a header background image, the positioning does not work properly if the vertical position is center or bottom. If you look at the example above, when I specify "left center" position, the header background is not visible (it seems to be centered significantly below the bottom of the header section of the page.

    2. If I use "left top" positioning, the background image appears properly, but it is static at the top of the page. When I scroll down on the page, the header image stays static and the rest of the page scrolls up and over the image. I tried you suggestion for the CSS. That causes the homepage to appear overlaid on top of the header, which is not useable.

    Any suggestions on how to fix both problems?

    Posted 3 years ago #
  6. Elliott

    It sounds like your wanting to set a background image to the "body" of the page and leave the header background transparent.

    Posted 3 years ago #
  7. I'm sorry I am not making myself clear. Please take another look at test.mnbreakfast.org. I changed the header background image in the skin to "left top". The image is now visible, the way it should be. Note that when you scroll down the page, the header image stays at the top of the page and the rest of the page scrolls over the top of the image.

    I would like the header background image to scroll up, along with the rest of the page.

    A second, separate question is why the header background image is not displayed properly when the skin is set to "left center" (in that case, the background of the header is all black; it should look identical to what it is now).

    Thanks for the help,

    Posted 3 years ago #
  8. Elliott

    1. Hmm, I don't see any way of doing that. If it's possible then I'm not sure how to do it and it would be best to hire a freelancer to help you out.

    2. Set it up like that so I can take a look.

    Posted 3 years ago #
  9. I have now changed the skin settings for the header background image to "left center". Note that the header background is now black. If you right click on the header and select "View Background Image" (if you are using firefox), you will see the image.

    Posted 3 years ago #
  10. I have figured out the scrolling issue. I didn't realize that I had set "Fixed" in the header background setting in the skin. Changing that to scroll solved the problem.

    Left Center still is not working. However, I can live with the Left Top setting for now.

    Posted 3 years ago #


You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme