Header picture not complete and not centered

[Fabian Cosmann]

Hi Tom,

sorry, me again. 🙂
I’ve another issue with the header picture.
A the parallax effect is not working properly on mobile phones I returned to a normal picture without parallax effect.
I’ve a text with 2 buttons overlay the picture. But I observe following behavior:
1. the picture is not shown completely. Only if I increase the padding, the picture is shown.
2. in my iphone or if I make my browser window smaller, the picture is not shown centered, it shows the left side.

What do I wrong?

Thanks Tom

[Tom]

Hi there,

1. Backgrounds images will only show as much as the content allows. No content = no background image. More content + top/bottom padding = more background image showing.

2. This is weird – do you have a link to your site so I can see?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Fabian Cosmann]

Hi Tom,

my site is:

http://www.rulster.de/rulster

Like you will see, it’s currently under construction.

Another strange effect is if you use the internet explorer 8, the header picture is not showing as single picture but repeating….

I’m also unable to make the picture smaller and to add a space between the header and the menu.

Thanks
Fabian

[Timothy Ajayi]

Hi Tom,
I just puchased the premium plugin today and I have been trying to add Page Header in my home page and its not been working for me. Possibly I’m leaving something undone. Please how do I resolve this?

Thanks
Timothy

[Tom]

@Fabian,

This is happening because you have the header set to 100% width. When on mobile, the width of the area makes it so the image doesn’t cover the entire height.

You can either set the background size to “Cover” all the time, or do it only on mobile:

@media (max-width: 768px) {
      .site-header {
            background-size: cover;
      }
}

As for IE8, make sure you have “Repeat” set to “No repeat”.

@Timothy – could you possibly create a new topic with some more details about the issue you’re having? Is your homepage a blog, or a static page? Do your values save when you publish, or do they disappear?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Fabian Cosmann]

Sorry Tom, this is not working.
I have set background images on cover and I added the code to my custom css.
On mobile I still just see the left half of the image.

Thanks
Fabian

[Tom]

Background images are very hard to control on different screen sizes unfortunately – just the way the CSS and HTML work.

In order to achieve the exact look you’re wanting, you might need to apply a different background image with the correct aspect ratio on mobile.

@media (max-width: 768px) {
      .site-header {
            background-image: url('URL TO MOBILE SPECIFIC IMAGE');
      }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts