Search code examples
phpcsswordpresswordpress-theming

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

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

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

    or

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

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