Jump to content

Archived

This topic is now archived and is closed to further replies.

sanjay149

How to show background image on mobile when canvas background video is setup on desktop

Recommended Posts

sanjay149    2
sanjay149

I just want a simple background image to show up on mobile devices after setting the canvas background to video for desktop browsers .. simple css? @media?

 

 

Thanks

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

Yeah what you would want to do is use media queries and set it so that the video is set to display: none and then add a background color to the CSS.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sanjay149    2
sanjay149

Hello!

 

Cool.  Sounds good.  Yes.  What you describe with the bg color is and video display: none is what happens with your system currently.  I'd like to have an image bg replace the video bg.

 

how @media?

 

Where can I locate your current responsive settings?

Share this post


Link to post
Share on other sites
sanjay149    2
sanjay149
@media (max-width: 767px) {
  
  .bg-video-viewport video[style]{
   display: none !important;
   }
 
}
 
This seems to have done the trick .. leaving a bg image set on the canvas with the video bg shows only the bg image when the screen is < 767px
  • Like 2

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Nice job! Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jennajonesdesign+    15
jennajonesdesign

@sanjay149 Thanks so much for sharing that bit of code! Saved my butt! I think having a fall back image option for mobile built into a future update would be really helpful!

 

Here is my site: http://finishingtouchgutters.com/

 

Jenna

  • Like 1

Share this post


Link to post
Share on other sites

×