- This topic has 6 replies, 3 voices, and was last updated 7 years, 10 months ago by
Tom.
-
AuthorPosts
-
March 25, 2015 at 1:58 pm #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
March 25, 2015 at 11:25 pm #91500Tom
Lead DeveloperLead DeveloperHi 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-developmentMarch 26, 2015 at 1:11 am #91520Fabian Cosmann
Hi Tom,
my site is:
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
FabianMarch 26, 2015 at 2:45 am #91546Timothy 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
TimothyMarch 26, 2015 at 10:12 am #91754Tom
Lead DeveloperLead DeveloperThis 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-developmentMarch 26, 2015 at 1:34 pm #91817Fabian 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
FabianMarch 26, 2015 at 11:52 pm #91921Tom
Lead DeveloperLead DeveloperBackground 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 -
AuthorPosts
- You must be logged in to reply to this topic.