resize background Image/attachment in mobile view - Forum | JoomShaper
Staff replied SP Page Builder

resize background Image/attachment in mobile view

Asked by Alexander Brandl 4 years ago Last activity 4 years ago

Hello, I use the helixultimat template and edit it with the page builder. How can I resize wallpaper for mobile view here.
https://dr-mainberger.de/_cms2022/index.php/notdienst.html
What is meant is the image below after the content.

Thanks in advance for your help, Alex

4 replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
4 years ago

Hi there!

Thanks for your query.

You may use the following code snippet in your custom CSS:

@media (max-width: 767px){
section#section-id-1658999312441{
    background-position: center !important;
    background-size: 100% 45% !important;
}
}

Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Best Regards

Paul Frankowski Senior Staff
4 years ago · edited

Hi Alex,

I have no CSS method.

Create new 2nd Row with smaller bg image , but with background-attachment: scroll , NOT fixed!
Set to display only in Mobile, Hidden in Desktop and Tablet .

And in 1st orginal Row Options > Hidden in Mobile.

foto_8811_2022.jpg

Paul Frankowski Senior Staff
4 years ago

In Rashida code change only one line

from
section#section-id-1658999312441

to
.sp-page-builder .page-content #section-id-1658999312441

and add also

background-attachment: scroll !important;

inside 2nd { }

Log in to reply.