动态设置背景图像

Question

I need to apply a background-image to a div that gets set dynamically. So the editor uploads an image on a specific page to a specific attribute and I catch this image then and display those.

Therefore I'd do something like this:

<div class="foo" style="background:url(<?php echo $attribute; ?>) no-repeat top right; background-size: 140px;">

Is there a better approach to it by not using style="..." ?

Thanks

Answer 1

You approach is correct but I would change something.

In the css I would make this:

.foo {
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 140px;
}

And in the HTML i would only keep the url.

<div class="foo" style="background:url(<?php echo $attribute; ?>);">

This way on the server-side it's easier to see where you have dynamic content. And you only need to change the url for the corresponding image.

So if later you work with another developer he knows exactly where he should change the images without going to your css.