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

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0