In this topic we are going to discuss about the technique to resize the background image as per window resolution.
Most of time we are thinking about of jquery and JavaScript techniques but we can find solution with the help of CSS itself.
simple to apply and also very effective, Let we see the coding.
HTML Code :
{code type=css}
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letterset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS Code :
html, body { margin: 0 auto; padding: 0; width: 100%; height: 100%; }
img { border: 0;}
img#selBack
{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
div#selContent
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#selContent p{
color:#FFFFFF;
padding:10px;
}
{/code}
Also you can see the Demo, Please click here
This entry was posted on Saturday, July 3rd, 2010 at 3:33 am and is filed under CSS Tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
March 9th, 2011 at 4:16 pm
Take a look at these blogs for an example of well written articles and……April 9th, 2011 at 11:59 am
I this blog is really great. I’m glad that i found a place to get such good information. Keep up the good work!…May 1st, 2011 at 7:44 am
That’s not just the best asenwr. It’s the bestest answer!August 29th, 2011 at 5:29 am
Thank you to sharing helpful informationAugust 29th, 2011 at 5:40 am
Great work! That is the type of info that should be shared across the internet.August 30th, 2011 at 1:22 am
This is my Excerpt…I saw this really good post today….
August 30th, 2011 at 10:49 am
Very helpful post man, thanks for the info.September 3rd, 2011 at 11:56 am
I am trying to build a blog as part of a project, and I have been told not use blogger or any of the blog building websites, Requirement is to get access to my blog privately without using any public site that requires me to log on to them before i g…How can I do a live streaming webcast on Blogger?…
December 4th, 2011 at 6:44 pm
how can i get taller fast…[...]Background Image Resize Using CSS | Cogzidel Templates Blog[...]…