Creating Transparent Background on Blogger
So this will be the result after this simple method:
Just like my template huh? :)
And this how I do it, we can’t directly use this CSS code:
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:
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.
New Post > Tick the Insert Image > Browse the image you created.
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.
Just use this code:
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.
Just like my template huh? :)
And this how I do it, we can’t directly use this CSS code:
opacity:0.4;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.
filter:alpha(opacity=40);
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:
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.New Post > Tick the Insert Image > Browse the image you created.
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.
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.
Comments
Post a Comment
Feel free to ask, suggest and comment regarding this post/blog. You can also contact me through e-mail, just always use the contact page. Thank you for visiting this blog.