PDA

Click to See Complete Forum and Search --> : picture, "fit to page"

mitchell
07-06-2007, 09:13 PM
when i do the usual;

<head> <style type="text/css"> body {background-image:url('bakgroundsite.JPG');} </style>

the background picture dosnt come up properly as it shows it in a tile effect or dont show the hole picture.

is there no way so it stretches/"fit to page" code one of you guys can help me with.

thanks
ray326
07-06-2007, 11:33 PM
No, background images don't stretch. There are some Javascript hacks for that, though.
mitchell
07-07-2007, 12:03 PM
you you tell me, please
• MaNiC MoE •
07-07-2007, 03:59 PM
I've been facing the same problem too, but you could make the image soooooooooooooooooooooooooooo big and the and not repeat it. So you'd write :


<style type="text/css">
body {background-image:url('bakgroundsite.JPG') ; background-repeat:norepeat ;}
</style>
dagadon
07-08-2007, 06:13 AM
You could try using z-index and position as a workaround:

give all elements z-index of 1:

* {
z-index:1;
position:relative;
}

css class for background image (overwriting z-index to 0):

.bgimg {
z-index:0;
position:absolute;
height:100%;
width:100%;
}

Add background image (with bgimg class) after body tag:

<body>
<img class="bgimg" src="yourimage.jpg">


Drawback:
100% height and width are screen size percentages i.e. image will be only actual screen size
• MaNiC MoE •
07-08-2007, 07:40 AM
You could try using z-index and position as a workaround:

give all elements z-index of 1:
Code:

* { z-index:1; position:relative; }

css class for background image (overwriting z-index to 0):
Code:

.bgimg { z-index:0; position:absolute; height:100%; width:100%; }


Add background image (with bgimg class) after body tag:
Code:

<body> <img class="bgimg" src="yourimage.jpg">


Drawback:
100% height and width are screen size percentages i.e. image will be only actual screen size


ahh... Great idea!!!
mitchell
07-09-2007, 06:30 AM
thanks dagon but how do i use that code:

* {
z-index:1;
position:relative;
}
dagadon
07-09-2007, 07:04 AM
mitchell, better if you use an external css file, but simply made you can use it so:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style><!--
body {
margin:0;
padding:0;
}
* {
z-index:1;
position:relative;
}
.bgimg {
z-index:0;
position:absolute;
height:100%;
width:100%;
}
--></style>
</head>
<body>
<img class="bgimg" src="yourimage.jpg">
Your HTML code
</body>
</html>


the '*' defines a rule for all elements
mitchell
07-09-2007, 06:06 PM
Thanks a lot dagadon you've really helped me out with it.

its been bugging me allot trying do pictures good, thanks

Mitchell