Transparent main column background

  • Resolved bryanbatcher

    (@bryanbatcher)


    10 years, 2 months ago

    I love this theme. It is by far the most user friendly theme I’ve found. One thing I’ve noticed is that there’s now way to control opacity of the main content background. I want a nice background image, but I also want the main content to stand out. So I’d like to have a site background image and a transparent color main content background so the content stands out but doesn’t completely hide the site background. Is this possible?

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

  • Hey there bryan,

    Hope you’re well today!

    This is possible with some custom CSS. Try adding the following CSS code in the style.css file of your child theme or add it in your site using the following plugin:

    https://www.ads-software.com/plugins/simple-custom-css 

    .site-content {
background: url(your_image_URL);
}

.site-content .container, .site-content .infinite-footer-container {
background-color: rgba(255,255,255,0.5);
}

    First part will add the background image, if you already have it ignore that part. Second one will add white background color behind the content area with 50% opacity. If you want to change the opacity replace the last numeric value (0.5) to what ever suits you the most (0 is completely transparent and 1 is full color). You can find more info on using rgba colors here:

    https://www.w3schools.com/cssref/css_colors_legal.asp.

    Hope this helps ??

    Cheers,
    Bojan

    Thread Starter bryanbatcher

    (@bryanbatcher)

    Awesome! It actually added a layer behind the main content area instead of changing the color. I set it to full width and added a main content background image and it worked the same way. Thank you!

    Anonymous User 9936702

    (@anonymized-9936702)

    Thanks for your help, Bojan!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Transparent main column background’ is closed to new replies.