Archived topic
scaling image in page header
18 replies · Started by Max on November 2, 2016
Hey Tom
Hope you and your family are well.
I am using a full width background image in a page header.
In another site I developed I already tested how to scale a graphic by giving it a class and then styling that class via @media css.
However, I do not understand how I can do this with a bg image, because I cannot access the html to insert a class id.
In summary, I want to scale one specific page header background image for screen, tablet, and mobile. How can I do that?
You would most likely have to apply a different image to the element on different screen sizes using @media queries.
This topic might give you an idea: https://generatepress.com/forums/topic/image-setting-for-mobileresponsive/
Yes I had already read that thread prior to starting this one.
I understand that I can use three different images (3 different urls in the @ media).
What I don't understand is how do I identify the page header in the @media css?
Can you link me to the page?
No.
Local development xammp
Hmm, have to guess then.
Try this: .generate-content-header
Sorry. I dev local.
If I use .generate-content-header won't that be site wide and not just on my specific page?
Use the Simple CSS meta box: https://wordpress.org/plugins/simple-css/
At present the background image does not scale down, and it does not remain centered.
I am running a child theme and so want to avoid using your css plugin if possible.
Can't I limit application of css be referring to page Id?
Hey Tom
Ran some tests.
I can control the bg image using:
@media (max-width:480px) {.page-id-3291 .generate-content-header {width:35%;height:35%;}}
So what css do I use to ensure that the bg image remains centered as the browser window is scaled down.
At present the image remains (inplace) that is, as I scale down the browser window you just view the (leading) left hand side/edge of the bg image.
Ok this seems to be working:
@media (max-width:480px) {.page-id-3291 .generate-content-header {background-position:center; width:100%;height:100%;}}
@media (max-width:768px) {.page-id-3291 .generate-content-header {background-position:center; width:100%;height:100%;}}Any reason why it is not ok?
The background-position is the important part there.
Looks good to me :)
If I use sections and not page header for the background image. What identifier do I use in my css. That is, if using page header it is (.generate-content-header), but what is it if I use bg image in sections?
Give your section a custom class in the settings, then you can use that class.
