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.

backgr         


        

Answer 1

In the first div you can see the result from the approved response, in the second div you can see the result from

<div style="background-image: url('<?= get_the_post_thumbnail_url(); ?>');">

The reason it does not work in the first div is because the parser thinks that the first block of text ends where the second " occurs.

Answer 2

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 3

As the others have suggested, you can simply set the background-image CSS property to do this.

However, none of the URLs that the other answers suggest worked for me.

I think the reason is because all of my images were stored in the "Media" area.

For all those who are storing your images in the "Media" area:

In order to find the URL to the image, you can:

1. Open the Admin dashboard of your site
2. Open the "Media" area
3. Click on the image you want to use
4. Copy the URL from the URL field, but only the portion after the domain name (e.g. domain-name.com)
5. Use this as your URL for the background-image property

I wouldn't recommend using the whole URL (using it without removing the domain name) because if your domain name ever changes, the URL will break.

Here's an example of what my full URL looked like: https://example.com/wp-content/uploads/2018/06/<Name of the Image>.jpeg, but I only used the /wp-content/uploads/2018/06/<Name of the Image>.jpeg portion.

In the end, my CSS property looked like this:

background-image: url("/wp-content/uploads/2018/06/<Name of the Image>.jpeg");

As a side note, the URL worked with both a beginning forward slash /wp-content/... and without one wp-content/....

Answer 4

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

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

Answer 5

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.

Answer 6

As many people have suggested already do not use php in .css ext as it won't get interpreted.

But if you really need to use php because of some reasons you only know as you not responding, you can change the extension of your stylesheet to .php

then you can have

customestyles.php

<?php
    header("Content-type: text/css; charset: UTF-8");
   $sectionImage = bloginfo('template_directory')."/images/parallax_image.jpg";

?>
<style type="text/css">

    .selector{

        background-image: url(<?php echo "$sectionImage";?>);
    }
</style>