Skip to content

How to set a background image semi-transparent

June 11, 2013

Today, I had faced a common issue which involved background images, and that is setting them semi-transparent or opaque, without causing everything else (child elements) inside the div component to be semi-transparent as well.

I initially thought you can write this as a separate attributes like so: –

opacity:0.5;
filter:alpha(opacity=50);

But this causes everything inside the div component to be transparent with opacity 0.5.

The easiest way to resolve this, is you need to use a painting program like Paint or Paint.NET or Photoshop then set the image to be transparent or more lighter.

Then you can write the CSS: –

    div.logo
    {
        background: url(“../images/logo_transparent.png”) 50% scroll rgb(255, 255, 255);
        background-repeat: no-repeat;
        background-size: 200px 200px;
        -moz-background-size: 200px 200px;
        -o-background-size: 200px 200px;
        background-size: 200px 200px;
        margin-left: auto;
        margin-right: auto;
    }

This centers the whole image in the center and in the middle of the div component with width and height 200px. Don’t set the width, or height attributes , use the background-sizes otherwise you will forcefully set the div to be that size and it won’t expand out.

Advertisements

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: