Need Help: How To Make a Continuous Background image with Dreamweaver CS3

[kris.d]

Hi,

I made an html page in Dreamweaver CS3 that contains my flash movie.

Could someone please explain to me how i can make my background image of an html page stretch continuously on both X and Y axis?

Thank you in advance.

kris.d

[rdoyle720]

Do you want it to stretch, or do you want it to repeat? Only newer browsers give you the option to stretch it, though you could fake it with a workaround.

If you want it to repeat, that'll happen by default on any background image. If it's not working for you, post a link to your page so we can see what's happening.

[kris.d]

Hello,
Thanks for responding.

Here the link to my page: www.creativekris.com

It has a simple gradient background that I want to stretch. At the moment, I made the background repeat only on the x-axis. I have not been able to find an online tutorial on stretching background images. Could you please help?

Thank you.

[rdoyle720]

I'm not sure I'm following the problem, the gradient seems to fill the entire background. What do you want to do differently?

[kris.d]

I wanted to learn how to stretch a background image whether its a gradient or a photograph. Would I be able to do that with dreamweaver cs3? If so, what steps would i need to take to create a stretched background image?

Thanks for your help.

[rdoyle720]

If you're willing to only support newer browsers, you can experiment with the background-size attribute:

HTML:
<div class="background"></div>
CSS:
HTML, BODY {margin: 0; padding: 0; width: 100%; height: 100%}
.background {height: 100%; width: 100%; background: url(myimage.jpg) no-repeat; background-size: 100% 100%}

That'll stretch the image, you can also try setting background-size to "cover" or "contain".

Or, if you want to support older browsers, you can stretch an image tag:

HTML:
<div class="background">
<img src="myimage.jpg"/>
</div>

CSS:
HTML, BODY {margin: 0; padding: 0; width: 100%; height: 100%}
.background {height: 100%; width: 100%;}
.background IMG {height: 100%; width: 100%; display: block}

[DoubleT06]

The best way to achieve this gradient image you have is to make the width 1px and then the height whatever you want. This brought your 30,000 bytes file size down too 214 bytes. Greatly reducing load time.

The reason I would do this is because the image will automatically repeat from left to right if you specify repeat-x in your css

heres the link to the image (just right click and save as)

http://webdesignyorkpa.com/wp-conten...gegradient.jpg

and heres all the code you have to use:

body {
background:url("background.jpg") repeat-x #c1c1c1;
}

[kris.d]

Thanks for the help. I will try it out both options.

Could someone please help me with fixing an error I am getting when I am in Deamweaver cS3 trying to edit my embedded swf file.Recently I had to format my hard drive. Before I formatted my hard drive, I published my flash file as a "protect from import" swf file in Flash CS3. I also copied my site root folder to my thumb dirve and then back into my computer's hard drive. When I tried to edit my embedded swf file directly from Dreamweaver, I got the following message:
"cannot open a protected movie".

What does that mean?

Thanks for your help.

[Back2012]

Check file hasnt switched to "read only"... I havent with swf's, but with text doc's I find if you move them around a lot of extrenal/portable devices.. start mixing it between FAT32 & NTFS.. they often go read only???.....