PHP - How do i stretch my background image 100%

Asked By Olusegun A. on 13-Jun-10 12:04 PM
Hello Friends,

I need to use an image as a background, but i dont want it to repeat horizontal or vertical. i want it to stretch 100% horizontal, pls how do i do this?

regards
Santhosh N replied to Olusegun A. on 13-Jun-10 12:28 PM
The best way to do this is to have a fixed image and adjust the weblayout to occupy something like a template ( this very site for example)...

If you wanted to have an image stretched (which i wont suggest as the image could be blurred or does not look as good as original image), then you have set body tag with width and height 100% and left, right to 0

Check here for detailed settings depending various browsers and versions
http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
Devil Scorpio replied to Olusegun A. on 13-Jun-10 01:39 PM
Hi There,

The trick to stretching an image in the background is to not have the image in the background. Instead, it is placed on the webpage (like any other image) and everything else is layered on top of it using css.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">

<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>

<body>
<div id="bg"><img src="yourimage.jpg" width="100%" height="100%" alt=""></div>
<div id="content"><p>Enter a ton of text or whatever here.</p></div>
</body>
</html>

Note : as always, if you are stretching an image into a size that is not the original, the image itself may become distored or blurry.

Regards :)
pradeep joshi replied to Olusegun A. on 14-Jan-11 07:50 AM


     Hi
     
     This is coding

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
    <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
    <div id="content">
    <h2>Stretch that Background Image!</h2>
    <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
    <p>Go on, try it - resize your browser!</p>
    </div>
</body>
</html>
Wayne replied to Olusegun A. on 25-Feb-11 02:06 AM
Try this:

.PanelWithBackground
{
    width: 450px;
    height: 24px;
    background-image: url("Images/Header.jpg");
    background-repeat: no-repeat;
    float: left;
    -o-background-size: 100% 100%, auto;
    -moz-background-size: 100% 100%, auto;
    -webkit-background-size: 100% 100%, auto;
    background-size: 100% 100%, auto;
    text-align: center;
    text-transform: uppercase;
    padding-top: 5px;
    color: White;
    vertical-align: middle;
    font-weight: bolder;
}

Works in Chrome, Safari, Firefox.
Works in all except IE for me.

Browser compatibility

Browser Lowest version Support of
Internet Explorer 9.0 background-size
Firefox (Gecko) 3.6 (1.9.2) -moz-background-size
4.0 (2.0) background-size
Opera 9.5 -o-background-size
Safari (WebKit) 3.0 (522) -webkit-background-size
but from an older CSS3 draft, see below
As far as I know Chrome is seen as WebKit.