Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Background featured image not positioned properly #4577

Closed
srcek opened this issue May 28, 2018 · 19 comments
Closed

Background featured image not positioned properly #4577

srcek opened this issue May 28, 2018 · 19 comments
Labels
bug Indicates a bug with one or multiple components.

Comments

@srcek
Copy link

srcek commented May 28, 2018

Background dynamic featured image doesn't seem to position itself according to settings (Position, Attachment, Repeat, Size). Instead, it positions itself to default settings.
Thank you.

@avermat
Copy link

avermat commented May 28, 2018

I'm seeing the same issue, the "Cover" option is not working for me. It shows up correctly in the editor, but not on the live post.

Elementor Single post template editor:
https://www.dropbox.com/s/bqrjl0tj6kid9pv/single-post-template.png?dl=0
Live post:
https://www.dropbox.com/s/miwodx0cbyb05d2/live-post.png?dl=0

@jornmo
Copy link

jornmo commented May 28, 2018

I can confirm that several options of the dynamic background is not behaving the same as with static.

@arielk arielk added the bug Indicates a bug with one or multiple components. label May 28, 2018
@popsantiago
Copy link

Hi,
Same issue here.
It's good in preview but not in front-end.
Thx

@bainternet bainternet added status/merged Indicates when a Pull Request has been merged to a Release. and removed status/merged Indicates when a Pull Request has been merged to a Release. labels May 29, 2018
@bainternet
Copy link
Contributor

Please update.

@therealgilles
Copy link

I am using:

Elementor 2.0.15 and Elementor Pro 2.0.10. I have a background-image set to dynamically use the post featured image in my blog post template. This used to work and now background-image does not get set anymore, although I see the image appear when editing the page with Elementor. Even the preview works, but not the real page.

Did this feature get broken recently?

@tiagoefreitas
Copy link

Happening to me too, it was working then I just changed a global font used in that section and it messed up the section background settings, it was on cover no-repeat and now on live it shows as defaults (repeat). It shows ok on the editor, so no idea what to do to fix it.

@Jamesbinda
Copy link

Jamesbinda commented Mar 31, 2021

This is happening to me as well. I have avoided using this feature because of this bug. I have a page template where the featured image is used as a section background set to COVER and NO-REPEAT, yet the image is not covering and is repeating. I originally had this issue about a year ago and I just decided to change my design because I couldn't find a fix, now I tried to do it again on another site and it's still a bug. This really needs to be fixed.

Using latest version of Elementor and E Pro on Hello theme.

@kpellegr
Copy link

I have the same issue. This is ridiculous. How can this be open for two yeas?

I set a static background image: it works (cover, no-repeat)
I change a font in a title ==> the background image suddenly repeats in x- and y-direction

@Jamesbinda
Copy link

This is happening to me as well. I have avoided using this feature because of this bug. I have a page template where the featured image is used as a section background set to COVER and NO-REPEAT, yet the image is not covering and is repeating. I originally had this issue about a year ago and I just decided to change my design because I couldn't find a fix, now I tried to do it again on another site and it's still a bug. This really needs to be fixed.

Using latest version of Elementor and E Pro on Hello theme.

Been going back and forth with Elementor on this. They keep saying they cannot repeat the issue on their end, yet it happens every time for me on all my browsers. Elementor support stopped responding over a week ago, I have followed up twice. Will post the fix if they ever give me one.

@sermalefico
Copy link

PLEASE FIX THIS

@PedroTiagoSimao
Copy link

PedroTiagoSimao commented May 17, 2022

This is still an issue. Happening sometimes only though. Cannot relate to plugin conflict.

EDIT
Works with the new flex containers

@Jamesbinda
Copy link

Jamesbinda commented May 17, 2022

For anyone who needs it, I did find one solution on another forum.

--------SOLUTION--------
Put this in the custom CSS of the section you have the featured image background on:
selector { background-size: cover; background-attachment: default; background-position: center center; background-repeat: no-repeat; }

(Just change it to fit your needs, i.e. background position: center left/center right, background-size: cover/contain etc.)

This totally fixes it for me, though Elementor still absolutely needs to fix this obvious bug. Unbelievable they havn't fixed it for over 2 years.

Hope someone can find this useful, here's the original forum where I found it:
https://www.reddit.com/r/elementor/comments/p6yz5s/single_post_template_unable_to_format_the/

Screen Shot 2022-05-17 at 1 57 46 PM

@pbaddock
Copy link

pbaddock commented Jul 8, 2022

So great to have a fix for this after battling it for so long, thankyou!

@darkdoom973
Copy link

I found that setting the image in all three, Desktop, Tab and Mobile, Fixes it

@osmgit
Copy link

osmgit commented Sep 24, 2022

I think I just experienced the same problem.

I was trying set a background image on a section to Position "Center Center" only on Tablet and Mobile views.

It did not work when leaving the Desktop Position "Default".

The fix I found was to set Desktop Position to something other than "Default". In my case I set the Desktop Position to "Top Center" and then the "Center Center" started working on Tablet and Mobile views.

@gerardreches
Copy link

I can confirm I've had this issue many times and I still have it, even with the latest versions of Elementor.

What it fixes it for me (only temporarily) is going to Elementor > Tools > General > Regenerate CSS & Data. This fixes it, but it eventually breaks again and you have to repeat it.

@MeltingOpera
Copy link

I'm having the same issue. This Issue was opened almost 6 years ago ... It's good that we can tackle it with a workaround but at some point it should be fixed.

@rebofel
Copy link

rebofel commented Jul 17, 2024

I come from the future and the problem is still in version 3.23.1
image

fix (put this css code in the container) thanks @Jamesbinda !

selector {background-size: cover; background-attachment: scroll; background-position: center center; background-repeat: no-repeat;}

It happens randomly.
I tried regenerating css, disabling special features, leaving only ACF/Elementor as enabled plugins and nothing fixes it except the css code above.

@gerardreches
Copy link

We need an official fix!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Indicates a bug with one or multiple components.
Projects
None yet
Development

No branches or pull requests