[Resolved] Header picture not complete and not centered

Home Forums Support Header picture not complete and not centered

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #91366
    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

    #91500
    Tom
    Lead Developer
    Lead Developer

    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?

    #91520
    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

    #91546
    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

    #91754
    Tom
    Lead Developer
    Lead Developer

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

    #91817
    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

    #91921
    Tom
    Lead Developer
    Lead Developer

    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');
          }
    }
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.