Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamic CSS background image in Wordpress

Tags:

css

php

wordpress

I just set up WordPress and tried to install a theme. All is good, but for one simple issue. I know how to make an image dynamic a image in the beginning to set up my index.php, like this:

<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="" />

but how to make an image dynamic which is called by css

.portfolio {
background-attachment: fixed;
background-image: url("../img/o-BUSINESS-TECHNOLOGY-facebook.jpg");
}

I've tried so many times but fail. Please suggest some ideas.

like image 914
jishan Avatar asked Feb 01 '16 20:02

jishan


1 Answers

You should note that Wordpress has an standard way to add <script>s and <style>s to the <head> section of your web document, which is using wp_enqueue_scripts action, but regarding your question, I will try to provide the desired way:

You may put that particular CSS in <style> tags in your documents <head> section and use:

.portfolio {
background-attachment: fixed;
background-image: url("<?php echo get_template_directory_uri(); ?>/img/o-BUSINESS-TECHNOLOGY-facebook.jpg");
}

UPDATE

Although, this seems to work and let you have the desired output, I strongly recommend you do not use it, because you may use:

.portfolio {
    background-attachment: fixed;
    background-image: url("img/o-BUSINESS-TECHNOLOGY-facebook.jpg");
}

in your style.css file and still get the same result.

I really do not know what kind of dynamic CSS, are you after, but If you really want it to be dynamic and you are sure about what you are doing, you have two methods:

  1. The above method (adding styles to <style> tag in <head> section of document)
  2. making your stylesheet file dynamic, using PHP (which you may get a tutorial on this link, or google for dynamic stylesheet php)
like image 122
Pmpr.ir Avatar answered Sep 29 '22 09:09

Pmpr.ir