[Support request] Background images for header at different viewports

Home Forums Support [Support request] Background images for header at different viewports

Home Forums Support Background images for header at different viewports

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #244615
    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?

    #244616
    Leo
    Staff
    Customer Support

    Hi,

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

    Let me know if it works!

    #244969
    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?

    #244973
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #244990
    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…

    #244991
    Leo
    Staff
    Customer Support

    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.

    #245020
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.