Transparency for Background color without affecting the text

My common method to give transparency for background color was

<p>Lorem ipsum</p>

P{
background-color:#000; 
opacity:0.2; 
color:#fff; 
display:block
}

This is going to take opacity for the text inside the p tag also.

Here is another method to get transparency to the background color without affecting the text.

 P{
   color:#fff;
    display:block;
    background: rgba(0,0,0,0.60);
}

And you are done!!

Padding/Margin for background images in CSS

This is the one of the small and tough problem for which I was searching the solution almost every day.

And finally I found something which pretty simple and effective.

I am using input box to show the result.

This is how we normally use to fix the bg image position in css

HTML

<input name="" type="text" />

CSS

Input {

background: url(../image.jpg) left no-repeat;

height:22px;

border:1px solid #8e8e8e;

}

Result:

Let’s try to give left padding for bg image

input {

background: url(../image.jpg) 6px 0 no-repeat;

}

Here, 2% represents x-axis of the image and 0 represents y-axis.

So here you get the left padding for your image.

This is it!!!

W3C valid code to embed the flash file

As we know many of us have struggled with this issue. After few days of searching , I came to know that w3c doesn't consider embed code and it consider that as an error.

So at-last I came up with a solution in few lines and I was on cloud 9 when I saw my webpage validation result in green line ...;)

Here is the simple lines to embed your flash files

<object type="application/x-shockwave-flash" data="yourflashfile.swf" width="" height=""> 
<param name="movie" value="yourflashfile.swf" />
</object>

Hope this will help you!!