[Support request] Background images for header at different viewports

[Webmaster]

Hey Tom,

I love GP. I recently ran into where you may have a solution. Here is the website I am currently working on. http://cgeventsolutions.com/

The “page header” or featured image is repsonsive, but I was wondering how to make that background image different for viewports @728, @480… The logo and tagline shrink to small at those size and is barely legible. Do you have any ideas?

[Leo]

Hi,

I think this post should help: https://generatepress.com/forums/topic/image-setting-for-mobileresponsive/#post-239400

Let me know if it works!

[Webmaster]

Hey Leo,

It didn’t work. That post was helpful but I think when Tom commented there, it was an older version of GP.

I tried using his code, in two different style.css cheets, the child // and parent. Then I also tried changing “.site-header” to “.page-header, .page-header-image, etc.” If you have a moment maybe you can take a look at this website.

http://cgeventsolutions.com/

The orange “page header” is responsive but the text in the middle is too small when reducing viewports. Do you have any ideas on how to keep the text large?

[Leo]

That code should work regardless which version of GP you are on.
Can you try adding the code by using the method here? https://generatepress.com/knowledgebase/adding-css/

Also to make it clear, the code provided does not make the background image responsive. It allows you to set a different image specific to mobile. In your case, you would want to create a similar image to what you already have but with larger texts so it’s visible on mobile.

Let me know if this is still confusing 🙂

[Webmaster]

Hey Leo,

I was actually using that plug-in 🙂
I have a screenshot here check this out.
http://cgeventsolutions.com/wp-content/uploads/2016/11/images-for-bg.png

Here are the three images at 480, 768, 1024 I would like to use.

Yes, that would be perfect if I could use these images instead of the current one at full size.

Any ideas?

I also used the flush cache button and tried to ctrl+f5…

[Leo]

Try the @media codes here for full screen and tablet: https://generatepress.com/forums/topic/image-setting-for-mobileresponsive/#post-239569
Right now it’s also using a file called top-bg-1.png instead of the .jpg you specified…
I would also stick with the px numbers Tom suggested for each device.

[Tom]

Very rarely a good idea to use an image with text as a background image – someone somewhere will have a screen size where the text is cut off.

[Author]

Posts