Are you looking for a Transparent content box for website ? It can be very useful in case you have a creative background for website, and it is overlapped by the content box or post box of website. Have a look at the image, which will clear you a bit more.
Non-Transparent background post box
And if you have spent lot of bucks for the attractive background image, then it is just a waste of money. But there is a resolution for it, and by applying transparency to background, it will give website a fresh look.
In this article I will guide you how to restyle post box with transparency, and hence it will create transparent background post box for a website. Just like in a screenshot below:
Transparent background post box
Below is a three step procedure to give transparency effect on website.
Step 1: Pick background Color Code of Post Box
The initial step of the tutorial is to pick the background color code of the post box. If you already know the background color code post box, then you can skip to Step 2. If you don’t know the background color code, find it using:
- Firefox ColorZilla Addon
- Firefox Firebug Addon
- Print Screen key, and pasting it on any image editor and picking the color code from there. Refer to the screenshot below, I’m using Adobe Photoshop’s Color Picker tool.
Step1 Create transparent background post box
Once you have the background color code, proceed to Step 2.
Step 2: Create Transparent Image Pixel
In this step we will create a new image file using adobe photoshop. To create new image, open Photoshop and navigate to File > New or you can also use Ctrl+N. Specify the width and height as 1 pixel, as we will use CSS, which I will explain you in Step 3. You can also refer to the screenshot below:
Step2-1 Create transparent background post box
After creating the new file, we will now fill the image pixel with color code we find in Step 1. Below screenshot will explain you to how to fill the pixel.
Step2-2 Create transparent background post box
Now, once we have the pixel filled, we will now apply transparency effect to it. For applying transparency effect, we will use the Blending options of the layer. Refer to the screenshot below:
Step2-3 Create transparent background post box
When you are satisfied with the preview, click Ok button to apply the blending options. As our image is ready to be used, we will have to export the image as PNG format, as it is the only type of format with supports transparency without loosing any pixel. In order to save image as PNG navigate to File > Save for Web… or you can also use Ctrl+Alt+Shift+S. It will open a new window with different options to export the image. Choose PNG-24 option from the drop down list as explained in the image below and save the file in your theme directory.
Step2-4 Create transparent background post box
Step 3: Add transparency to post box
This is final step of this tutorial, in other words we say final touch up for transparent website. In this step we will edit the CSS code for the post box which we want to apply the transparent effect. Locate the code for the post box in the CSS file and replace it with below code snippet.
Please Note: This is a syntax code, where you will have to replace “#your-post-box-div” and “transparent-image-path-location.png” with real values which will vary as per your scenario.
#your-post-box-div {
background: url("transparent-image-path-location.png") repeat;
}
After editing the CSS file, upload the transparent image as well as the updated CSS onto your web server. Now refresh to the website to see the effect, as I have in below screenshot:
Demo Transparent background post box
What do you think after seeing the image above? It did made the site look different now, as the background on the website is visible. If you ain’t satisfied with the transparency effect then, you can repeat the Step 2 and Step 3 again until it meets the satisfaction level.
With this we come to the end of this tutorial, if you have any query or need further assistance you can simply post comments below as the feedback.