Jump to content

How to convert a CSS background property into foreground?


pstein
 Share

Recommended Posts

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 by pstein
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...