pstein Posted May 26, 2020 Share Posted May 26, 2020 (edited) Assume I have a CSS background key similar to .logo { background: url(/static/foobar/mylogo.jpg) 0px -no-repeat; } Is there a way to convert this background property into a foreground image by Javascript? All other configurations (margin, padding, background-position-x, background-position-,....) should remain untouched or converted accordingly. Thank you Peter Edited May 26, 2020 by pstein Link to comment Share on other sites More sharing options...
Ingolme Posted May 26, 2020 Share Posted May 26, 2020 I think you could use getComputedStyle() to find out what background image has been applied and then generate an <img> tag. It's a bit complicated, especially if you want to keep everything exactly where it is. You'll have to pull out the values of background-size and background position and use them to set the size and position of the <img> tag. Repeating backgrounds would make things a lot more complicated. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now