Archived topic
Background images for header at different viewports
6 replies · Started by Webmaster on November 15, 2016
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?
Hi,
I think this post should help: https://generatepress.com/forums/topic/image-setting-for-mobileresponsive/#post-239400
Let me know if it works!
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.
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?
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 :)
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...
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.
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.
