Background image not on WP home page

[idaryl]

Hello,
in a style css I have a reference to a horizontal rule background image:

background: url(../wp-content/plugins/hrticulate/assets/hrs/hr-bluetooth-saw.png) repeat-x 0 0;

no matter what theme I turn on (even the default WP themes) it will not display on the home page - however, it will display on any post/page/category or whatever [inside] the theme. I can place it anywhere and it will display..... but not on the homepage [any homepage, regardless]

any ideas on this... its got me bamboozled... :(

or is there a way to get it to look into the plugins dir - like a path of some kind?

[Traevel]

Not very familiar with WordPress, but if the homepage is in the same directory as wp-content the two dots in the url will make it go up a directory and look for wp-content there. It's an easy check to see if it works on the homepage if you remove the two dots.

background: url(/wp-content/plugins/hrticulate/assets/hrs/hr-bluetooth-saw.png) repeat-x 0 0;

It could be that your child pages now no longer show the background. From what I read it's best practice in WordPress to provide child theme pages with their own stylesheets, overriding only the things you want different (in this case the background-url for the child pages).

If it doesn't change anything then posting the structure of your site could shed some more light.

[idaryl]

This is from a plugin I have developed - if, as I said it does not display on the homepage using ../wp-content - but on the other pages does.

And then if I change it to wp-content (no dots etc) it shows on the homepage only - this has nothing to do with the placement of child themes or templates therein.

[Traevel]

I believe that's what I mentioned could happen. And because you only posted that one line of css, and nothing regarding the structure/location of the files this will always remain a guessing game. My point is this:

You have a main page, and a main stylesheet (it contains that line you posted). You also have other pages, which are in a different directory than the main page (that is why the line won't work for both). Ideally, stylesheets (regardless whether you use wordpress or not) should work following the rules of inheritance. That means you only change the things you want different from the parent stylesheet in a child stylesheet, and things you want the same simply come from the parent stylesheet.

So let's say you have a structure as follows:

• /index.html
• /parent.css
• /wp-content/
  • /themes/
• /someFolder/
  • /about.html
  • /shop.html
  • /child.css

parent.css might look like this (no dots, because it should work for the main page)

/* lots of stuff */
 background: url(/wp-content/plugins/hrticulate/assets/hrs/hr-bluetooth-saw.png) repeat-x 0 0;
/* lots of stuff */

Now, because you only want the background different in the /someFolder/ you make a child.css that only changes the one line:

background: url(../wp-content/plugins/hrticulate/assets/hrs/hr-bluetooth-saw.png) repeat-x 0 0;

In your about.html or any page you want the different background url in you would let them use parent.css first and child.css second, that way the child overrides the css from the parent, but only on the part of the background url.

You could make a separate "child" stylesheet for just the homepage (which would be less work) but keep in mind that today it's just a background-url, but who knows how many things you'll want to change later on in the process.

Again, this is not specific to WordPress, but in general. I don't know about the plugin you wrote, nor how you applied it and to which pages. I guess you could write a plugin that conditionally adds css to a page or not depending on its location, but since WP is supposed to take work away from you and not add more I'd reckon that's not the best way to go when css, by design, has this issue covered in the form of inheritance.

[idaryl]

I added a feature to the plugin that asks the user whehter or not its being used on the home page or any other - once selected, it applies the ../wp-content or wp-content into the path via an array result {$bgd_place}

Until I figure a different method where it automagically just is aware of the plugin dir, this will do - kludgy at best - but its a fix for the moment - thanks

[diafol]

You aren't very clear about WHERE this css is being placed. Your theme css should be style.css under the name of that directory. If you've made a child theme, then you place any overrides into a style.css in the child theme directory. Otherwise you can (enqueue) add a stylesheet of your own - usually in the functions.php file, e.g:

 wp_enqueue_style( ... );

This could also be done via a plugin. Can you include the code for your plugin (relevant bits only).

[idaryl]

its not in a child theme - I never said it was.... Yes... that was my fault - the assumption was that I was talking abourt a child theme, no.

I have a plugin I'm developing for another plugin call Visual Composer - (it uses its own set of css to style results from the user entry) the naming convention for those css rules does not conflict with the WP css.

However, as I mentioned its working, but with a limnitation, only on the home page or internal pages, and Ive narrowed it down to the hardcoded path of the css (either ../wp-content or... just wp-content)

I tried the standard wp plugin path ( plugin_dir_path( $file ) ) but thats ignored. So I wanted to get a function into the file to call to the path but that didnt work - but in an array (referencing some text - with the twoo different paths - it does work) provided I add it as a var like $bgd_path.

Now I have a radio system asking if its on the homepage or not. Much rather prefer it to be automatic and completely invisible to the user.