Dynamic CSS background image in Wordpress

Question

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.

Yes my problem solved. please accept answer from Trix (check the little check mark beside the answer), as this is right solution to this problem, for any further reference. That would be useful for others — biji buji
– biji buji, Commented Feb 17, 2016 at 13:15

Peyman Mohamadpour · Accepted Answer · 2016-02-01 22:25:17Z

5

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:

The above method (adding styles to <style> tag in <head> section of document)
making your stylesheet file dynamic, using PHP (which you may get a tutorial on this link, or google for dynamic stylesheet php)

edited Feb 1, 2016 at 22:25

answered Feb 1, 2016 at 20:35

Peyman Mohamadpour

18k24 gold badges94 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

jishan Over a year ago

thanks trix it works .if i have 10 to more css images is that all time use the same code.or have any other way.and what can i do with my old stylsheet code deleted or remain the old code

tacone Over a year ago

the update looks wrong, the img folder is pretty much never in the document root.

Peyman Mohamadpour Over a year ago

@tacone relative paths in style.css regard current theme's root, not the document's root.

tacone Over a year ago

@trix background-image: url("/img/o-BUSINESS-TECHNOLOGY-facebook.jpg"); is not a relative path.

random_user_name Over a year ago

Fair enough. At least comment in your question that this isn't the WordPress way, and show an example of what it would look like. We're trying to build an authoritative site of questions and answers, and this is only half the answer.

|

Collectives™ on Stack Overflow

Dynamic CSS background image in Wordpress

1 Answer 1

UPDATE

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related