I simply can't find the correct way or working way to do this. I've made an alternative header and added an option with redux theme option to have the alternative header. I've also made a custom-css.php where i can enter some files which are output in header. This should override any css from style.css

the thing i need is really simple but whatever way i have used, it doesn't work

an example

.header-fixed { background: transparent url(assets/images/mix1.png) repeat-x; }

With this option it doesn't work and the image with chrome inspector doesn't exist. If i add a full path like

background: transparent url(wp-content/themes/theme-name/assets/images/mix1.png) repeat-x !important;

then it works, why, i am not sure. But i don't believe this is a right call.

Other examples

  1. background: url( ."/assets/images/mix1.png";) repeat-x !important;

  2. background: url( " ."/assets/images/mix1.png"; ") repeat-x !important;

3.background: url( " /assets/images/mix1.png) repeat-x !important;

4.background-image:url(."/assets/images/mix1.png"); background-repeat:repeat-x;

  1. background-image:url(/assets/images/mix1.png); background-repeat:repeat-x;

And there were many more. So any tips pls

1 Answer 1


UPDATE: Added a third example to show you how to output the path inside a PHP string, per the source code you provided in the comments.

There's nothing wrong with having a full path in your CSS but you want to make sure the path is being dynamically generated by WordPress for the most consistent results.

In this case the get_template_directory_uri() and/or get_stylesheet_directory_uri() helpers will be handy. The one you use depends on whether you are building in a standard theme vs. a parent theme with support for child themes. You can read more about the differences here: https://codex.wordpress.org/Function_Reference/get_template_directory_uri

On with the code, based on the example which you claim to be working as expected:

// standard theme / parent theme asset example
background: transparent url(<?php echo get_template_directory_uri(); ?>/assets/images/mix1.png) repeat-x !important;

// child theme asset example
background: transparent url(<?php echo get_stylesheet_directory_uri(); ?>/assets/images/mix1.png) repeat-x !important;

In your specific case, try this:

// specific example from your source file (line 23)
.header-fixed {  background: transparent url(' . get_template_directory_uri() . '/assets/images/mix1.png) repeat-x !important;  }
  • Thing is this doesn't work. The only one which works is like this background: transparent url(wp-content/themes/theme-name/assets/images/mix1.png) repeat-x !important; This is what i get with inpect element oi61.tinypic.com/9g97bl.jpg
    – Max
    Commented Oct 3, 2015 at 3:41
  • Yes, you can't add PHP directly in a standard style sheet. The PHP will just be rendered as plain text as seen in your screen shot. You mentioned "custom-css.php" in your question so I assumed the PHP would be parsed. Are you no longer using that file?
    – dswebsme
    Commented Oct 3, 2015 at 3:46
  • Hey @dswebme yes i am using that file. Inside that file I've tried with many solution and only this one worked (also it's my file for custom css pastebin.com/KLjLKBdb
    – Max
    Commented Oct 3, 2015 at 4:00
  • Hey, nop, it doesnt work that either. Never mind, i went with other way, to add one extra class in div and call it from normal stlye.css when i need it. Thanks for trying to help me. Best regards
    – Max
    Commented Oct 4, 2015 at 0:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.