I have a background image path in my .css file as background-image: url('../images/someImage.png') and that works fine, but now I want to change my path of all the instances (considering bussiness requirement) and want to have a variable in the path like background-image: url('../images/'var(--someVariable)'/someImage.png') but css does not recognize that variable in the url path and considers its value as someVariable while if I use the same variable in some other place in the same file, I get the desired value of the variable, I want to know how can we achieve dynamic background image url in .css file as I have around 5000 instances of the same in my project and want to have a central solution for all the instances. Thanks in advance.
Asked
Active
Viewed 337 times
0
Iñigo
- 1,877
- 7
- 25
- 55
-
Please edit your post to make it more readable. – mate00 Aug 14 '19 at 07:45
-
1You can use something like SASS, this link maybe help you: https://teamtreehouse.com/community/scss-how-to-change-the-background-url-dynamically-based-on-class – Masoud Sadeghi Aug 14 '19 at 08:11
-
You cannot do this using only css. – liakoyras Aug 14 '19 at 09:19
-
This is a very good example of what CSS vars can and can not do: check the PAQs: https://medium.com/dev-channel/css-variables-no-really-76f8c91bd34e – Cornel Raiu Aug 14 '19 at 09:20
-
var(--someVariable) is a php or js variable? – Wordpress Dev Aug 14 '19 at 11:54
1 Answers
0
Yes you can keep the default someImage.png style in style.css.
In the PHP code file you can add the dynamic URL. If you are using php variable:
$dyn_path = $someVariable;
$img_path = get_template_directory_uri().'/images/'.$dyn_path.'someImage.png';
<style>
.class_name{
background-image: url('<?php echo $img_path;?>')
}
</style>
Kirk Beard
- 9,569
- 12
- 43
- 47
Wordpress Dev
- 301
- 2
- 6