I need help

**me.com** · 03:18 PM

I'm designing a web page in dreamweaver MX and I cant get my background image to stretch across the whole page. Instead it just tiles it, if you know a way to get it to stretch the background image to fit the page please let me know

**southernlady** · 11-26-2004, 01:33 PM

What size is your graphic and can it be resized outside of dreamweaver?

**me.com** · 11-26-2004, 01:57 PM

I can resize in fireworks, but how can I get it to be 100% accross tne background for all screen sizes?
Thanks

**southernlady** · 11-26-2004, 02:03 PM

That you do by using a percent and not using a number.

You want it to be 100% of the width. And this is where HAND coding makes it easier cause you can tell it exactly what to do.

Unfortunately, I must step away for a little while. I'll be back in about 2-3 hours. If someone hasn't come in and helped you by then, I'll come back and guide you to the right tutorials, ok? Liz

**monkey** · 11-26-2004, 02:17 PM

im guessing something like this would work

Code:

body {
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: 100%; }

**southernlady** · 11-26-2004, 04:09 PM

Thanks, monkey...unfortunately, he won't see it til tomorrow now cause he emailed me and will be away from his computer. I did just email him back and let him know that there is an answer waiting on him here. Liz

**Rincewind** · 11-28-2004, 12:34 PM

Quote:

background-position: 100%;

This style setting won't make the image 100% of the screen size. It will just shift the image 100% of the page width to the right. However you will probably want to use some css to stop the image tiling vertically or moving off the top when the page is scrolled. This is done using code like this:

Code:

body {
	background-image: url(Front.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

To get the size to adjust, the only method is to use a script (php or javascript) to sniff for the users screen size and then load in the appropriate size of image. However even this has problems cause the screen size rarely equals browser size. You have know way to know whither there are panels or toolbars on the browser window or even whither the browser window is maximised to the screen or not.

One sollution to your problem may be to fake the effect. Use two or three images for the background. One static one say in the top left corner. Then a second statis in the top right corner. Finally a third image tiles between to two to give the apperance of one continuous image that streaches but isn't really.

**me.com** · 11-28-2004, 12:55 PM

i inserted the code, but nothings happening to the page

**Rincewind** · 11-28-2004, 01:11 PM

The css code should go in the head section of your page inside style tags (or else into an external style sheet, but lets not confuse things.) for exampe

Code:

<html>
<head>
<style type="text/css">
body {
	background-image: url(Front.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
}
</style>

You should also chang "front.jpg" to the actuall path and name of the image file you are using.

**me.com** · 11-28-2004, 03:16 PM

thanks for your help