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]

It's possible to override the background with something else via CSS customizations, although it's going to be specific to each section so you'd have to make a rule for each one that you need to change. Are you familiar with CSS at all, @hunterscotty?

[hunterscotty]

Hi Adam,

Thank you for your reply. I am somewhat comfortable with CSS, although I'd appreciate some guidance on the code if you could?

[Adam7]

Can you post a link to a page of your site and a section you want to change?

[hunterscotty]

Hi Adam,

My Weebly site is: DesignClassUk.Weebly.com.

My current site - what I am trying to replicate on Weebly - is DesignClass.co.uk

Thank you for any help you can provide!

[Bernadette3]

This is not my forte, @hunterscotty but there's others here in community that might be able to help you out while Adam is on his weekend. I'll run this by him when he gets back, though. 

[hunterscotty]

Hi Bernadette,

I appreciate you asking Adam. 

Have you heard anything from him yet?

My site can be seen at designclass.weebly.com

I don't want to reassign my domain designclass.co.uk until I resolved this issue.

Thank you again,

Scott

[hunterscotty]

Hello,

Any update on this issue?

Thank you,

Scott

[Adam7]

Is the image uploaded to your site anywhere, @hunterscotty? Whether to the theme or a hidden page somewhere?

You'll basically be doing something like this to override the header section image background on mobile:

<style>
	@media (max-width: 767px)
	{
		.wsite-section.wsite-header-section.wsite-section-bg-video.wsite-section-effect-reveal
		{
			background-image: url('path/to/new/image.jpg') !important;
		}
	}
</style>

[hunterscotty]

Hi Adam,

You are awesome! 

I can upload an image to the assets folder.

Any hint on where I can add this code? 

Is it possible that different pages can have a different background image?

My site is for design and technology education, and we have sections covering woodwork, graphics, electronics, etc and it would be nice for each section to have their own specific background image. 

Thank you!

[Adam7]

I would add the code to the Header Code area for a specific page on the Pages tab, that way it's only affecting the header section on that specific page. It would also allow you to modify the code to use different images for each page. If you put in in Settings > SEO > Header Code it will change it for the header section on every page to that image.

[hunterscotty]

Hi Adam,

I tried adding the code to the header section of an individual page, calling on an image I uploaded to assets, but it did not work. Not sure what I am doing wrong?

I tried adding the code to either Header or Footer sections, and I also tried the following code:

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

Still not having any luck

[hunterscotty]

@bobafett- have you got any hints?

[Bernadette3]

I don't know if it's the code itself, but you could try uploading your image to a hidden page. Then use the image url in place of what you have now. 

[hunterscotty]

Hi @Bernadette 

Nice idea, but I've not been able to get that idea working either.  

[Bernadette3]

I couldn't get it to work either. I'll fiddle around with it later tonight, but have also asked Adam to please take another look in the morning. 

[hunterscotty]

Hiya @Bernadette 

I really appreciate the help and effort you and @Adam are giving me with this. I'm flumoxed how to solve it. 

[Adam7]

It's probably the file path for the image that isn't working. Did you upload that image to the Assets folder in the theme editor? If so, try using this path:

/files/theme/holder1.jpg

[hunterscotty]

Hi @Adam 

Yeah, I uploaded the file to the 'images' folder of 'assets'.

Just tried what you've suggested, but still no luck  

Not sure what I'm doing wrong? - Are you able to check what I've done?

Sorry and thank you

[Adam7 · Accepted solution]

Hmm.. try this instead:

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

I simplied the selector to a single class. 

Edit: I also added some single quotes since I forgot them.

[hunterscotty]

Hi @Adam

A weird sort of progress. Now when I view the mobile version of the site, the background is just black - no image loading. The desktop version of the site keeps showing the video background as required. When I rescale the desktop version, the video rescales.