CODEWITHSUNDEEP
htmlcsswordpress
Marco Martins
Marco Martins

Reputation: 459

wordpress 3.3 relative paths in CSS

I want to add an image to be a background of the header, the thing is that I don't want to add an absolute path since I'm doing this on my pc and them is to upload to my server.

should the <?php bloginfo('template_directory'); ?> work in the css? It is not working here.

code:

#branding {
    background: url("<?php bloginfo('template_directory'); ?>/images/background2.jpg") repeat-x repeat-y;
    height: 150px;
}

Upvotes: 5

Views: 42693

Answers (4)

IfYouSeekAnthony
IfYouSeekAnthony

Reputation: 348

As a SASS/SCSS user, I find the simplest way to solve this problem is to declare the URL as a variable in your .scss file:

$wpLocation: '/wp-content/themes/themename/';

Then reference it like this:

$background: url($wpLocation + "/whateverfile.jpg");

Upvotes: 0

Mr. Zarik
Mr. Zarik

Reputation: 1

.img-div {
    background-image: url("./assets/images/your-img.jpg");
}

Upvotes: 0

Syed
Syed

Reputation: 16513

Somehow @developdaly solution did not work for me, but this helped:

.img-div {
  background-image: url("wp-content/themes/your-theme/assets/images/your-img.jpg");
}

Upvotes: 2

developdaly
developdaly

Reputation: 1375

No, you can't use PHP within a CSS file.

You can still use a relative path. This example will work if your CSS file and images directory are in the same directory. WordPress knows this is relative to the theme.

#branding {
    background: url("images/background2.jpg") repeat-x repeat-y;
    height: 150px;
}

If the images directory is in a parent of the CSS file:

#branding {
    background: url("../images/background2.jpg") repeat-x repeat-y;
    height: 150px;
}

Upvotes: 15

Related Questions