Setting an element's background image via CSS from a value in a PHP variable

Question

Is there a way of using a php variable to manipulate css?

I'd like to add an image chosen by a user in a wordpress post (featured image) to the background of a specific div. I know how to mix php and html but, is there a way of doing the same with css?

I'm getting the image with:

$img = get_the_post_thumbnail_url($post_id, 'mySize');

brandizzi · Accepted Answer · 2018-08-27 23:58:56Z

1

Well, you already know how to mix PHP and HTML, right? Then you just do the same, but creating a <style> element in <head>. You put your CSS in this element. Something like this:

<head>
    <style>
        div#myDivId { background-image: url("<%= $img %>"); }
    </style>
</head>

edited Aug 27, 2018 at 23:58

answered Aug 27, 2018 at 21:54

brandizzi

27.4k9 gold badges111 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wasteland Over a year ago

Thanks - didn't think of that.

Mihail Minkov · Accepted Answer · 2018-08-27 22:00:28Z

0

What you could do is something like this:

<head>
  <style>
    .user img { background-position: center center; background-repeat: no-repeat; background-size: cover; }
  </style>
</head>
...
<div class="user">
  <img src="images/trans.png" width="50" height="50" style="background-image:url(<?php echo $img; ?>);" />
</div>

Where trans.png is a small transparent png image.

answered Aug 27, 2018 at 22:00

Mihail Minkov

2,6632 gold badges29 silver badges50 bronze badges

Collectives™ on Stack Overflow

Setting an element's background image via CSS from a value in a PHP variable

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related