How to dynamically set a background image with the customizer without putting the css as an inline-style

Question

Here is what I am using currently,

<div class="home-header" style="background-image:url('<?php echo get_theme_mod( 'home-header-img' ); ?>'); height: 500px; width: 100%; display: flex; justify-content: center; align-items: center; background-repeat: no-repeat">

I have the background-image being set by the customizer and it's working great however I am unable to have inline styles due to the ThemeForest theme standards. What should I be doing here? or is there a better way to go out this? thanks

Answer 1

I would recommend changing it to this:

<div class="home-header" style="background-image:url('<?php echo get_theme_mod( 'home-header-img' ); ?>')">

and adding this to style.css or an other stylesheet:

.home-header {
  height: 500px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
}

In general, inline styles are not allowed, but Themeforest makes an exception for background-images. So by moving the remaining code in a CSS-file and only leaving the image, you're fully compliant with Themeforest's requirements. The exception for images is mentioned in this article.

Let me know how it goes!

PS: If you want to add the code using wp_add_inline_styles(), but don't know how it works, I can also give an example of that.