Jump to content


Photo
- - - - -

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

background video mobile

  • Please log in to reply
4 replies to this topic

#1 sanjay149

sanjay149

    Newbie

  • Members

  • 6 posts
  • Country: Country Flag

Posted 04 June 2014 - 05:46 PM

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



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 June 2014 - 12:01 PM

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.



#3 sanjay149

sanjay149

    Newbie

  • Members

  • 6 posts
  • Country: Country Flag

Posted 05 June 2014 - 04:51 PM

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?



#4 sanjay149

sanjay149

    Newbie

  • Members

  • 6 posts
  • Country: Country Flag

Posted 05 June 2014 - 09:44 PM

@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


#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 June 2014 - 12:33 PM

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