Creating Transparent Background on Blogger

So this will be the result after this simple method:
1
Just like my template huh? :)
And this how I do it, we can’t directly use this CSS code:
opacity:0.4;
filter:alpha(opacity=40);
For the reason that it will affect also the contents, I mean the text and image will be transparent also if we use the code above, just like this.
2
Notice that, instead the blog text is white, it turns green because of the opacity. So, let’s just forget that code.
This is how I do it, we should create a TRANSPARENT BACKGROUND instead of the opacity code. We need Photoshop.
Open Photoshop > File > New > Make the width and height 50px > Create a New Layer (Shift + Ctrl + N) > Color it black or “000000”
Then follow this:
3 3-1 Set the opacity to 35% or your desired transparency, disable the “Background” visibility by clicking the eye button right beside it, then the most important is save it as “.PNG” file. After this, upload the image on the web then get the “url”. I advice upload the image on your blog.
4
New Post > Tick the Insert Image > Browse the image you created.
5
Then click Edit HTML to show the code. The highlighted text is the direct link of your image just copy it.
Desired which part of the “wrapper” you want to be transparent.
6
Just use this code:
background:url(link of the image);
If you want to make the main-wrapper transparent paste the above code inside it like below:
 
Same method on the other wrapper. Preview, if it’s fine then Save it. That’s all.
Note: I’m not expert on this thing just sharing.

Popular posts from this blog

Set table width to 100% on PDF export in Datatables

#bestyearever