• 0

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


Question

Posted · Report post

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

5 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

@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
2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@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

1 person likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now