Background gets blurry when using timeline Addon - Forum | JoomShaper
Awaiting an answer SP Page Builder

Background gets blurry when using timeline Addon

Asked by kweb 3 years ago Last activity 3 years ago

Hi there,
Im using latest SPPB 3 on Helix Ultimate Framework. I have a very strange behavior here:

https://www.tennistraining-kares.de/en/about-me

Please have a not to the timeline. My background image is totally blurry. The strange thing is - the background image gets blurry when the size of the column is really high - like in the timebar. But normally the background image will just fit to the visible area. The CSS is:

background-image: url(/staging/images/2023/01/18/counter-bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll;

This normally cannot result in a view like that?? Can you check?

kweb

12 replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
3 years ago

Hi

Thanksfor contacting us. Could you please give me a screenshot of your issue?

_regards

kweb Asked this
3 years ago

Here attached:

https://imgur.com/a/iwFZZeC

The background image is too big and blurry. It seems its growing when the content is getting long. But thats not the normal behavior when you set background-size to "cover".

Mehtaz Afsana Borsha Staff
3 years ago

Could you please check your site? I cant access on that.

kweb Asked this
3 years ago

ah sorry I moved the domain already - please try now I have changed the login details.

Mehtaz Afsana Borsha Staff
3 years ago

Could you please give me that specific page link?

Mehtaz Afsana Borsha Staff
3 years ago

Use this custom CSS



.sp-page-builder .page-content #animated{
        background-size: contain !important;
}

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

kweb Asked this
3 years ago

Hi, well thats not a good solution, I want to background image to be fit right to the bottom. With "contain" it ends when it reaches the maximum height.

cover is working normally always - why not here? For example I have used cover also on this SPPB timeline without any problems.

To Page

‏‏‎ ‎J‏‏‎‎e‏‎‏‏‎‎n‏‏‎‎s W.‏‏‎
3 years ago

Hello kweb,

you need to set the background attachment to fixed.
Currently the attachment is set to scroll. 

.sp-page-builder .page-content #animated{
    background-attachment: fixed;
}

It should be possible for you to set this in the SPPB.
Unfortunately, I am currently on the laptop without access to the SPPB and can therefore not check whether and which setting would have to be changed.

-> https://www.tennistraining-kares.de/de/ueber-mich

.sp-page-builder .page-content #animated {
    padding-top: 250px;
    padding-right: 0px;
    padding-bottom: 250px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-image: url(/images/2023/01/18/counter-bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: 0 0;
    box-shadow: 0 0 0 0 #fff;
}

https://rohde-bau.de/unternehmen/chronik

.chronik {
    background: url(../images/chronik_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
kweb Asked this
3 years ago

Hi Jens,
yes I wanted to use scroll because IOS is not supporting background-attachment: fixed. Thats why I wanted to get rid of "fixed".

Log in to reply.