CSS background images in WordPress

Question

Is it possible to get a background image in CSS like you normally do in HTML when working with WordPress. I've tried doing this but it doesn't work.

background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");

Answer 1

Another way is accessing image using css file location as the reference point, e.g. .class-name{ background-image:url("../images/file-name"); //one level up, then images folder background-image:url("../../images-directory-02/images/file-name"); //two levels up, then two folders in }

Answer 2

you can't add php code into .css files. but if you wanna do this using php see this.

Answer 3

I was having this issue with adding a background image to my Underscores based theme and I found this works:

background: url('assets/img/tile.jpg') top left repeat;

I first tried:

background: url('/wp-content/themes/underscores/assets/img/tile.jpg');

but that didn't work for me.

Answer 4

You don't need to use PHP in this question, your CSS file is already in template folder, so you can call image just like this:

background-image: url("images/parallax_image.jpg");

So you don't need to know template path to call images from your theme.

Answer 5

If the image folder is in the theme folder you can use:

background-image: url("/wp-content/themes/themeNameHere/images/parallax_image.jpg ");

Answer 6

Short answer is you can not render PHP in a CSS file. I would suggest making sure your <rel> tag is setup correctly and just using the /images/parralax_iamge.jpg part.