CSS background images in WordPress

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 ");


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.

PHP code cannot run in .css file, however you can use inline style, such as:

<div style="background-image: url("<?php //url ?>");">


  .class-name {
    background-image: url("<?php //url ?>");

The above would be useful when working with custom fields for dynamic image paths.

If the image is located in the theme directory, PHP won't be needed, let's say the image folder is directly under the theme folder /theme-name/images, and the stylesheet is /theme-name/style.css, then you can just add the background image to the css file as follows:

.class-name {
  background-image: url("images/file.jpg")

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

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

Similar questions

Disallow duplicate background images - CSS LINT
I have the following CSS meant to display a background image with all browsers: CSS lint gives a warning that background-image is being called several times. Is there any way to prevent that?
CSS - Change css background of class text without sub element
I'm working on a project based on a wordpress theme that is regularly updated so I can't change the HTML (without making maintenance hell anyway). I added a stylesheet that allows me to change the appearance of the site and all I have to do is add an "include" with each update. I have an availability calendar that shows as follows: As you can see, ...
How do I insert a repeating, tiled image into the background of a WordPress page or post (not page background)?
I have been fiddling with my Pytheas theme again. This time, I am trying to insert a 2-color gif (suitable for tiling) onto the backgrounds of my pages and posts. Note that I do not mean the background of the whole page. That is, and should remain, black. The site/sample-post in question is here. I have investigated as extensively as I can given my...
Wordpress theme custom background feature doesn't edit the background correctly
I'm building a custom Wordpress theme and I'm trying to add the ability to use a custom background through the admin panel. I used the example given here in the WP codex. I'm using WordPress 3.5.2 I am getting the background option and it all appears to work fine until I actual view the page. I have noticed that it adds an internal style which refe...
Wordpress (Genesis child theme) fs background image hidden by white background in "Home 2" Area
I've inherited management of an existing Wordpress site that uses a custom Genesis child theme. I have attempted to set a full screen background image using the "Full Screen BG Image" plugin. However, the Home 2 area, used for a widget displaying latest posts, seems to have an irreversibly opaque background and the background image hides behind it....
Changing the background color and the main content background in wordpress
I've been searching on this topic for almost 1 hour and I couldn't find an answer, as you know most youtube videos out there are completely useless. My website is on WordPress and I would like to change the background color, and the main content in specific pages Here's the code that I tried to add to the Custom CSS box It didn't do anything Here m...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.