Archived topic

Header picture not complete and not centered

6 replies · Started by Fabian Cosmann on March 25, 2015

Viewing posts 1–7 of 7

March 25, 2015 at 1:58 pm #91366

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

March 25, 2015 at 11:25 pm #91500

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?

March 26, 2015 at 1:11 am #91520

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

March 26, 2015 at 2:45 am #91546

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

March 26, 2015 at 10:12 am #91754

@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!

March 26, 2015 at 1:34 pm #91817

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

March 26, 2015 at 11:52 pm #91921

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');
      }
}

This archived topic is closed to new replies.

Start building better websites today.