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 ");
Solutions
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 ?>");">
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")
}
If the image folder is in the theme folder you can use:
background-image: url("/wp-content/themes/themeNameHere/images/parallax_image.jpg ");