Design - Background

Ah OK.
There is no need for anything. Simple Image control has options to remove (image) background in smartphones. So it is OK, not big deal. Few clicks.

Ah OK. There is no need for anything. Simple Image control has options to remove (image) background in smartphones. So it is OK, not big deal. Few clicks.

Did some more experiments. If can help some of you.

• Slider image when disabled in smartphone gets no called and downloaded in browser. Better speed, pageload and no unnecessary images called to device.

• Image control alone is called because it is in HTML code, not background-image in CSS. It is not shown in smartphone, but it is downloaded.

• Image control inside Layout container, both removed from smartphones. Image is still called, downloaded but not visible.

So it seems only Slider images works well because they are called from CSS file. A bit surprise smartphone browser download images from a container that is defined with media queries as not for smartphones.

Did some more experiments. If can help some of you. - Slider image when disabled in smartphone gets no called and downloaded in browser. Better speed, pageload and no unnecessary images called to device. - Image control alone is called because it is in HTML code, not background-image in CSS. It is not shown in smartphone, but it is downloaded. - Image control inside Layout container, both removed from smartphones. Image is still called, downloaded but not visible. So it seems only Slider images works well because they are called from CSS file. A bit surprise smartphone browser download images from a container that is defined with media queries as not for smartphones.

Shame no control with background image directly in control works.

I dont get this logic. Why Slider with images when removed from smartphones doesnt download images to browser ?
But layout container with background image inserted is downloaded in browser ?

Both have images defined in CSS file.
What is different in code. To understand this in Themler could be holy grail, as loading pages in smartphones is today important parameter for Google rankings.

Shame no control with background image directly in control works. I dont get this logic. Why Slider with images when removed from smartphones doesnt download images to browser ? But layout container with background image inserted is downloaded in browser ? Both have images defined in CSS file. What is different in code. To understand this in Themler could be holy grail, as loading pages in smartphones is today important parameter for Google rankings.

Hi,

If you using Image control and disable 'Display On' in responsive mode, image will be downloaded on any device anyway. Image just hidden.

But you can set different Background image for each responsive mode for Container.

please follow these steps:
1. Insert and select Layout Container or select exist container in your template.
2. Select Desktop Responsive view.

3. Set background image for your Layout Container.

4. Change Responsive. (For example to Tablets)
5. Change Layout Container background image. (as on step 3, but on Tablets mode)

Now you have two different background image, one for Desktops and Laptops modes (setted in Desktops), and another for Tablets and Phones mode (setted in Tablets). And browser will download only one image, respond to your responsive mode.

Of course you can set 4 different images. One for each responsive mode.

Thank you,
Themler Team

Hi, If you using Image control and disable 'Display On' in responsive mode, image will be downloaded on any device anyway. Image just hidden. !Image-Responsive-Display-On.jpg! But you can set different Background image for each responsive mode for Container. please follow these steps: 1. Insert and select Layout Container or select exist container in your template. 2. Select **Desktop** Responsive view. !responsive-mode-buttons.jpg! 3. Set background image for your Layout Container. !container-background-options.jpg! 4. Change Responsive. (For example to Tablets) 5. Change Layout Container background image. (as on step 3, but on Tablets mode) Now you have two different background image, one for Desktops and Laptops modes (setted in Desktops), and another for Tablets and Phones mode (setted in Tablets). And browser will download only one image, respond to your responsive mode. Of course you can set 4 different images. One for each responsive mode. Thank you, Themler Team

Yes I know. Just noticing it is strange agreement about standard from web consortium.
More strange is I did not know all this just few weeks ago.

Yes I know. Just noticing it is strange agreement about standard from web consortium. More strange is I did not know all this just few weeks ago.

Hello Stagger Lee,
please let us know do you need further help with this topic

Regards,
Aileen

Hello Stagger Lee, please let us know do you need further help with this topic Regards, Aileen

How to remove background image on phones if it is inside Design - Background ?
If i delete it (in phone mode) then it is deleted in all modes. I dont see those 4 small icons, so have to delete it.

How to remove background image on phones if it is inside Design - Background ? If i delete it (in phone mode) then it is deleted in all modes. I dont see those 4 small icons, so have to delete it.

Hi,

This option is general for all responsive views. You can not disable the page background for one mode only.

Sincerely,
Hella

Hi, This option is general for all responsive views. You can not disable the page background for one mode only. Sincerely, Hella

Thanks Hella, I saw it on some old topic.
Do you know some workaround this problem ?

Thanks Hella, I saw it on some old topic. Do you know some workaround this problem ?

Hi,

The custom css as follows should help:

@media (max-width: 767px)
{
[class*="bd-pagebackground"]
{
background: none;
}
}

This is for Phone mode for all templates.

The custom css can be added to the Home tab >> Settings >> Additional CSS.

Thank you,
Olivia

Hi, The custom css as follows should help: <pre> @media (max-width: 767px) { [class*="bd-pagebackground"] { background: none; } } </pre> This is for Phone mode for all templates. The custom css can be added to the Home tab >> Settings >> Additional CSS. Thank you, Olivia