How to set a custom background image to a container

  • I have a section on my one page layout website where I show a widget with text and a button. How can I set a custom background image to that section/widget ?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello,

    Please share your website URL and let us know which element you want a background for.

    Looking forward to help.

    Thread Starter wosley24

    (@wosley24)

    @my Theme Shop.Am still developing on the localhost https://localhost/scentology/ at the moment.
    But basically this is what i use d inside the section

    <div class="about-contact">
    <?php if( is_active_sidebar( 'about-contact' ) ) : ?>
         <?php dynamic_sidebar( 'about-contact' ); ?>
     <?php endif; ?>
  </div>

    The following is then the content of the widget when I load the page:

    <div class="gca-column one-half"><h3>EXPLOSURE</h3>
	<p>Explosure large library of fragrances or let us customize a signature fragrance in line with your scent branding strategy</p>
	<h3>CHOOSE</h3>
	<p>Explosure large library of fragrances or let us customize a signature fragrance in line with your scent branding strategy.Explosure large library of fragrances.</p>
	<h3>ENJOY</h3>
	<p>Explosure large library of fragrances or let us customize a signature fragrance in line with your scent branding strategyExplosure large library of fragrances.</p>
	<h3>QUALITY</h3>
	<p>Explosure large library of fragrances or let us customize a signature fragrance in line with your scent branding strategyExplosure large library of fragrances or let us customize a signature fragrance in line with your scent branding strategy.</p>
</div>

    So I would this section where I have my widget in,to have a dynamic background image.

    This code should do it:

    .gca-column {
  background: url(https://www.example.com/your-background.png) no-repeat center center;
}

    Change the image URL and adjust the other parameters if needed.

    Hope that helps.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to set a custom background image to a container’ is closed to new replies.