Is it possible to use different background pictures for mobile and desktop?

[hunterscotty]

Hello all,

I have a site that uses a video as a background for the desktop version of the site. I have several main 'sections' that each use a different video background.

This video obviously does not play on the mobile version of the site, but shows a signle frame, which does not look good. 

My questions are:

1. How can I ensure the mobile version of the site uses a selected image for a background?
2. How can I ensure each section uses a different background image on the mobile site?

Thank you

[Adam7]

Strangely, I don't see that when I test. Did you remove the code?

[hunterscotty]

You are a genius @Adam

I placed a copy of the image in the 'assets' folder, rather than the 'images' folder within 'assets', and it is now working!

I'm wondering if I can edit your code, so that all the placeholder images are neatly stored within the assets/images directory?

Thank you so much! If you were in Scotland, I'd buy you several beers.

[Adam7]

You should easily be able to re-use that with any other images you add into the Assets folder.

And I would very much enjoy that - I like Scottish beer!

[hunterscotty]

Hi @Adam 

Let me know when you are next in Scotland and I will take you on a tour!

Your code is working. One issue, how can I make the image stretch to 100% vertical height?

Should I change the height to 100hv?

<style>
	@media (max-width: 767px)
	{
		.wsite-header-section
		{
		  background: url('files/theme/holder1.jpg') repeat center center !important;
		  position: relative;
		  height: 100%;
			visibility: visible !important;
		}
	}
</style>

[noah11]

I'm trying to implement this solution and the background is showing up as black or grey. Is it possible the file path changed? Not very good with CSS but i can figure it out with some help. Thanks!

[Bernadette3]

I believe this is only possible with css as you suggested. I have very limited knowledge on editing the css/html, and Weebly employees are not able to assist with code edits. If you post a link to your site here, though, another user may be able to point you in the right direction. 

[jfelden]

Not sure if anyone is still following this but I am tryign to do this today. Have a different image show up in my header on mobile, but I am having no luck. Where do we need to put this code?

[Astrocis]

Also works:

<style>
@Media(max-width: 767px)
{
.wsite-header-section
{
background: url('files/theme/holder1.jpg') no-repeat top fixed !important;
position: relative;
height: 100%;
visibility: visible !important;
}
}
</style>