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
5 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
  • 17945 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

  • jennajonesdesign and batman like this

#5 Danny

Danny

    Is Awesome!

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

Posted 06 June 2014 - 12:33 PM

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



#6 jennajonesdesign

jennajonesdesign

    Super Member

  • Members

  • 143 posts
  • LocationBillings, MT
  • Country: Country Flag

Posted 17 October 2014 - 10:19 PM

@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


  • batman likes this