css - Background image call problem

admin管理员组

文章数量:1122846

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;

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

And there were many more. So any tips pls

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;

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

And there were many more. So any tips pls

• images
• css

Share Improve this question asked Oct 3, 2015 at 2:32 MaxMax 12944 silver badges1414 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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;  }

本文标签： cssBackground image call problem