Is it possible to use the featured image of a page as a css background without inlining?

by

So, I’m totally new to WordPress and trying to “convert” a static site to a WP theme.

I have a page where I’d like to use the featured image as a background for a div.

I was wondering what is the best way or whats the convention to do that?

It doesn’t matter if its a featured image or whatever, I just want the user to be able to change the image from the dashboard.

I’d shy away from inlining if possible, so is that the only option?

3 Answers
3

There’s two possible options in creating a stylesheet from a dynamically generated value. The first options is Inline stylesheet, as follows:

<div id="hero" 
  style="background-image: url(<?php // TODO retrieve image here. ?>); ">
</div>

And the second options is to use an Internal stylesheet, and possibly the best solution out of both. Using stylesheet internally requires you to have your div an identifier possibly assigning the ID, or class, code as follows:

<div id="hero"></div>

The Internal stylesheet:

<style>
    #hero {
       background-image: url('<?php // TODO retrieve image here. ?>');
       background-position: 50% 50%;
       background-size: cover;
    }
</style>

Using External stylesheet to retrieve and assign the value of the image from the database is impossible. You can still use external stylesheet for the rest of the styles of your div; i.e. #hero, and have the image be retrieve and assign via inline/internal stylesheet.

Leave a Comment