- This topic has 18 replies, 2 voices, and was last updated 7 years, 5 months ago by Tom.
-
AuthorPosts
-
November 2, 2016 at 11:03 am #241150Max
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?
November 2, 2016 at 4:22 pm #241218TomLead DeveloperLead DeveloperYou 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/
November 2, 2016 at 7:17 pm #241229MaxYes 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?
November 2, 2016 at 8:08 pm #241244TomLead DeveloperLead DeveloperCan you link me to the page?
November 2, 2016 at 8:11 pm #241245MaxNo.
Local development xammpNovember 2, 2016 at 8:13 pm #241247TomLead DeveloperLead DeveloperHmm, have to guess then.
Try this:
.generate-content-header
November 2, 2016 at 8:15 pm #241249MaxSorry. I dev local.
If I use .generate-content-header won’t that be site wide and not just on my specific page?
November 2, 2016 at 8:16 pm #241250TomLead DeveloperLead DeveloperUse the Simple CSS meta box: https://wordpress.org/plugins/simple-css/
November 2, 2016 at 8:16 pm #241252MaxAt present the background image does not scale down, and it does not remain centered.
November 2, 2016 at 8:19 pm #241254MaxI 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?
November 2, 2016 at 9:09 pm #241259MaxHey 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.
November 2, 2016 at 9:37 pm #241261MaxOk 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?
November 2, 2016 at 10:13 pm #241263TomLead DeveloperLead DeveloperThe background-position is the important part there.
Looks good to me 🙂
November 2, 2016 at 10:15 pm #241267MaxIf 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?
November 2, 2016 at 10:16 pm #241269TomLead DeveloperLead DeveloperGive your section a custom class in the settings, then you can use that class.
-
AuthorPosts
- You must be logged in to reply to this topic.