Background-Color: Transparent;

  • In the “Customize” Admin Panel, is it possible to add a checkbox/radio button for simple css: background-color:transparent; ?

    Reason for Request:
    In order to use a transparent repeatable pattern background-image.png that overlays the theme’s background color I would need this feature.

    Currently, I’m just overwriting in child-theme and that does the trick. Thought this option might help others that may have less experience customizing themes in the back-end.

    Thanks! Keep up the gooood work!

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

  • @colarikbrothers,
    Can you let me know how you add a background image to the front page.
    I need to get some front page picture a big darker.

    Tx,
    Hugo

    Thread Starter colarikbrothers

    (@colarikbrothers)

    @permeke,

    Try going to themes “Customize” settings: wp-admin > Appearance > Customize > Background Image

    In there, you can upload an image and even has options for css styling. Pretty neat!

    Thank you …

    Would you know how i can add transparency that background image.
    Because is didn’t find the CCS styling option.

    Thread Starter colarikbrothers

    (@colarikbrothers)

    @permeke,

    The purpose of this support thread is request an Enhancement to the admin options to include the transparency either with: background-color:transparent; or by developing RGBA color (background-color:rgba(0,0,0,0.5);)

    …………..
    Work-arounds for time being that I would use:

    In how images work on the web…there are only 2 ways I know how to add transparency to the image:

    1. By exporting original image with transparency using the PNG format, then uploading it
    2. OR – Using the relatively new css3 property “opacity”. However, this CSS3 property affects the entire elements opacity…so if you apply it to the <div> or container holding the background image…everything inside of the <div> will be affected by the opacity property. Example below.
    <div style="background-image:url('file.png'); opacity:0.8;">
     <div><p>I am other content inside the background-image container</p></div>
</div>

    RESULT: The <div> and <p> tags inside the background-image container will be affected by the opacity:0.8;. Typically not desired.

    INSTEAD:

    <div id="background" style="background-image:url('file.png'); opacity:0.8;"></div>
<div id="content"><p>I am other content inside the background-image container</p></div>

    CSS: (You may need to adjust the z-index of background to be behind all other content. In order to apply z-index, you need to define the position attribute)

    #background { position:relative; z-index:1; }
#content { position:relative; z-index:2; }

    CONCLUSION:
    If you’re using a small image and file size is small (approx. 150-200KB), it is much easier to learn how to export your image with transparency in the PNG format. Otherwise, a large background image PNG is typically a very large file size, in which case solution 2 may work for you. Export as JPG between 150-300KB and use proper HTML + CSS to create effect.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Background-Color: Transparent;’ is closed to new replies.