- This topic has 19 replies, 4 voices, and was last updated 2 years, 11 months ago by
David.
-
AuthorPosts
-
February 2, 2020 at 8:02 am #1152164
Bernhard
Hello,
my problem is the background image in the page hero is displayed expanded.
My container width is 1140px and the image is 1140×345.Actual settings are container and inner container contained, no padding, offset site header height 345px.
The more padding I add, the more the image is blown up and exceeds the container width. What shall I do to avoid, that the image is displayed bigger than the original?February 2, 2020 at 11:41 am #1152325Leo
StaffCustomer SupportHi there,
Any reason you are using a merged header element?
I don’t believe you need that.
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 2, 2020 at 12:58 pm #1152365Bernhard
OK, I played around with the padding and found a setting that works. Thank you.
Just one more question: is it possible to have the background overlay color only behind the text?
February 2, 2020 at 4:26 pm #1152423Tom
Lead DeveloperLead DeveloperHi there,
That’s not possible with the settings, but we could use CSS to do that if you’d like?
.inside-page-hero h1 { display: inline-block; background: rgba(0,0,0,0.5); padding: 10px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 2, 2020 at 11:50 pm #1152551Bernhard
Perfect, thank you.
February 3, 2020 at 8:37 am #1153131Tom
Lead DeveloperLead DeveloperYou’re welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 6, 2020 at 8:46 am #1156840Bernhard
Hello,
my excuses, but I’m still struggling with the background image.As I have two layouts with different width for the featured image 672 and 1140), I used before the same height 345. But this created a problem in WPSP because there is a different image ratio (672:345 is more or less 2:1, 1140:345 is around 10:3) and it showed the different ratio in the cards. I decided then to use the same ratio for the wider images and they are now 1140×585.
The problem is now, that I don’t want to show the full height because it fills up more or less the screen and the reader does not see the beginning of the text. But with parallax it is only possible to define background image position on top.
Here is my example. With the parallax I see only heaven and palms and not St. Peter’s Dome. For my layout is it necessary to see initally the bottom of the background image. By the way, I have configured now without parallax to center bottom, but it does not really show the bottom. If you change the browser width, you can see that it shows more or less part of the lower part of the image.How can I configure this? Thank you.
February 6, 2020 at 4:47 pm #1157201Tom
Lead DeveloperLead DeveloperHi there,
I’m not sure I’m seeing it on that page – there doesn’t seem to be any parallax?
The parallax option does require the image to start at the top, unfortunately – there isn’t a workaround for that at the moment.
You could try setting the image to
background-attachment: fixed
with some CSS, which is kind of parallax-y, but I’m not sure if that will work, either.Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 7, 2020 at 1:03 pm #1158303Bernhard
ACtually I did not implement the parallax on this page because I have St. Peter’s Dome in the bottom and with the actual parallax settings it is cut. I made some pages with parallax, where the bottom of the image is not critical.
On the internet I see pages where the image is not fixed but scrolls from bottom to top slower than the overlay. This is not possible with GP?
Can you please explain better how to implement the
background-attachment: fixed
Thank youFebruary 7, 2020 at 5:52 pm #1158442Tom
Lead DeveloperLead DeveloperFor example, if you disable parallax, you can do this:
.page-hero { background-attachment: fixed; background-position: center center; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 10, 2020 at 4:56 am #1160427Bernhard
OK, this looks good so far. But the background image is expanded again. How can I handle this? Please see the issue on the test page.
February 10, 2020 at 7:05 am #1160682David
StaffCustomer SupportHi there,
edit the CSS Tom provided to include the size property like so:
.page-hero { background-attachment: fixed; background-position: center center; background-size: contain; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 10, 2020 at 8:43 am #1160779Bernhard
Hi David,
there is no change.February 10, 2020 at 1:55 pm #1161052David
StaffCustomer Supportoops sorry the background-size property doesn’t apply with fixed attachements. The image is sized relative to the browser viewport. I am not sure there is a CSS solution for this.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 10, 2020 at 3:44 pm #1161123Bernhard
It seems the background-size property does not react. I tried px and % but the result is all time the same.
-
AuthorPosts
- You must be logged in to reply to this topic.