Archived topic
Page Hero background image over stretches
12 replies · Started by Atefan on December 6, 2020
Hello,
When i add in the Page Hero it stretches, till you count the pixels.
https://ibb.co/KXtxc6F
And
https://ibb.co/4dpwtZd
What I'm doing wrong???
I read your instructions, video and text, but I don't find my solution
Thanks
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
sorry, I did not see your response, mail notification failed I guess.
I would need to place the image again, to show you.
will let you know.
Sounds good.
We will be here :)
Ok, I have to come back with this one.
i found once a solution to fix it:
.page-hero {
background-size: contain;
}
But now i try to optimze on speed again with
Autoptimize
and this setting
Aggregate CSS-files?
Aggregate all linked CSS-files? If this option is off, the individual CSS-files will remain in place but will be minified.
will break the given code from top.
but I gain 11 POINTS at google page speed, from 85 to 96!
What can I do, to keep the Autoptimize Settings, without breaking the header background image?
Hi,
Can you try unchecking "Also aggregate inline CSS" and check the result? Let us know.
This is unchecked.
my fault, now it is unchecked and it works, lose only 3 points.
but is there a better way?
my fault, now it is unchecked and it works, lose only 3 points.
but is there a better way?
The problem here is, I'm not sure if Autoptimize can exclude embedded stylesheets. If you placed the styles on Additional CSS, that particular CSS is added to <style id="wp-custom-css"> that's embedded on your site's <head>. The same thing occurs with Simple CSS if you're using that plugin.
But here's something to try:
You can try creating a child theme and place your CSS on the child theme's style.css. You then exclude the child theme's style.css on "Exclude CSS from Autoptimize:" text field within Autoptimize by adding its path.
Example path: /wp-content/themes/generatepress_child/style.css
Hi, thanks,
But when I put everything in my child theme css,
you will see again, the hero background, went out of style.
without changing the optimizer.
seems like the child theme CSS is not loaded.
as child theme, CSS is not working now.
i copied from customizer to my child theme css.
W3C CSS
phrase error
Hi there,
looking at your site examples i wonder if this hero Method would be a better solution for your site:
https://generatepress.com/forums/topic/hero-header-question/#post-1608160
It will create 2 columns, left hand for your title, and right hand will contain your featured image ( NOT as a background ).
