Responsive background image

Hello,

I am using Genesis/Dynamik and the Beaver Builder full page template (provided by Colin). On my home page, I’m using a specific background image that doesn’t play nicely on various screen resolutions (looks good on some, but not others). I’d like it to stretch or shrink as the screen resolution changes. There are many plugins to help, but I’ve tried a few now and can’t figure out how to get them to work with BB.
IE) One plugin uses a short-code only, but since I’m not using the WP or Genesis page editor, where do I put the shortcode?
IE) Or another plugin requires page ID or class, but while the page ID is “14” it seems BB and my BB full screen page template over-rule that…
Anyone have any tips on how to make a full page responsive image background for one single page?
Thank you for your time!

Hi There,

Good question and I may not be the best to answer this as we aren’t too familiar with Dynamik. I am hoping one of our Genesis/Dynamik/BB users can chime in here.

Have you tried good old fashioned CSS to accomplish this?

Best,
Billy

Hi there dotdotdot,

As Billy has suggested, your background image sizing can be taken care of using a bit of css. You just need to create some media queries to resize your background image at certain resolutions. Or maybe even hide it and replace with a solid color at certain screen resolutions.

You can add these to the “Responsive” section in Dynamik.

In the video link below, Eric Hamm (the Dynamik creator) demonstrates how to do this with a logo image, but it’s basically the same process for your background image.

How To Make Your Logo Image Responsive

Hope that helps.

Cheers,

Colin

Hello Dotdotdot,

It’s been quite awhile since we’ve heard from you so we are going to mark this thread resolved. If you need anything further, please let us know!

Ben