Stretch Background

[AnneR]

Please help me with some code to stretch my background image to fit any browser. Thanks.

[MandyJay]

Hi there,
You cannot stretch a background image to fit all browser but a lot depends on what the background image is of. Can you post a link to the image so I can see it, then can tell you the best way to make it fit all browsers.

Thanks very much
MJ
:biggrin-new:

[AnneR]

Following is a link to the site I am working on: http://nationalwomenofachievement.org/new5.html (http://nationalwomenofachievement.org/new5.html) The background is repeating rather than stretching.

Also, if you have any suggestions on how I might improve this site, I would welcome. Thanks for your help.

[MandyJay]

Hi,
You cannot stretch an image, stretching will distort it. Your current image is 1866 wide there are resolutions way larger than that, so it will repeat horizontally as well.

One I can advise is to make a section on the right of the image all one colour. It looks like it is already like that. But then make that area much wider. Same with the bottom of the image have a part that is all one colour, which again looking at it seems like you have but make that part much bigger. If you worked out how large your largest page would be (vertically) then you could make the image a bit larger than that. You would have to watch file size though as the pixels could add up to a heft file size.

You could use this css http://thewebthought.blogspot.co.uk/2010/10/css-making-background-image-fit-any.html though bear in mind as your image stretches it will pull the image out. If you are not sure what I mean open up your graphics editor, highlight the image and then just drag it vertically and see how the image changes. Same applies with the width as you could have brower resolutions wider than your image.

What would make it far easier was if you did not have a pattern on your background image but just a colour gradient, then it would be so simple to have the image cover the whole background.

As for how to improve the site, hard to give any comments as you have no navigation and that is the only page. When you have the basics done and extra pages, then do come back and ask again. Thank

MJ

[AnneR]

I was trying to make my background look like this background: http://www.the.purpleproject.com How did they do this?

I guess I am still more of a newbie than I thought because I don't know how to follow the instructions you gave.

I am trying to redo an existing website http://www.nationalwomenofachievementorg. The page I sent to you is the beginning of the new site.

[MandyJay]

Hi,
Link you gave I cant get to work.

Depending which option you want to go for the link I gave gives instructions for one of the options. The easiest option would be to have a gradient colour instead of a gradient colour with "swirls" (for want of a better word, lol) in it.

Let me know

MJ

[AnneR]

Thanks for the link. I think I finally got it. http://www.nationalwomenofachievement.org/new4.html However, I would like for the gold to come down just a little more. You mentioned before that I could make the bottom of the image larger. Can you help me with how to do that?

Sorry, I made a mistake on the other links before. They should have been http://www.thepurpleproject.com and http://nationalwomenofachievement.org

[MandyJay]

Glad you got it working. If you want the gold to come down further then you wil have to remake the image giving it more gold colour.

Thanks
:star:
MJ