asked on

Fluid Background but not entire site design

I am trying to create a website and I am learning the different types of design (fluid, static etc). I want my background to be fluid where it will expand with their screen but I do not want me entire site to stretch. Is that possible?

The main reason I am doing this is that I am creating a gradient background that cannot be repeated. I want to gradient background to fill the screen no matter what size resolution they are using.

DT20Three

Background stretching is not possible without using CSS3 "background-size" which most browsers don't currently support as it is so new. The best thing to do if you are using a background that you don't want repeated but want centred is to align the background-image in the middle of the page and have all the edges of the image the same colour with the background also using that colour. That way, it looks to the user like one 'fluid' background, esp. as you are using a gradient. I do wonder, what sort of gradient background cannot be repeated, other than a starburst, or something radial?

My suggestion is to consider using repeatable images to guarantee that users see the same thing and to make it easier for yourself.

brightsusan

ASKER

The gradient is basically burgundy at the top and grey at the bottom. It blends from one color to the other. If I repeat it, I would end up with a bunch of burgundy and grey squares.

Hans Langer

Look this:

http://www.designdetector.com/demos/css-gradients-demo-1.php

jtwcs

Are you looking to have the page background go from burgundy to gray (top to bottom)?

If yes, what you can do is apply the gradient image to either the body or a wrapper div around the rest of your layout. Set the the image to repeat-x and the color to the gray color of your gradient.

background:#CCC url(bg-gradient.png) repeat-x;

brightsusan

ASKER

itwcs... that is a great idea. My only question is that it would still be messed up from side to side wouldn't it?

I have created a page you can look at to see what I am working on...
http://www.brightideaswebdesign.com/Travis-Phillips/index.html

ASKER CERTIFIED SOLUTION

jtwcs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

brightsusan

ASKER

That works exactly like I need!! Thank you!

One question, I use Photoshop CS4 (also learning) what would be the best way to blend that at the bottom into a non-textured flat?

DT20Three

OK.... why didn't you just say? I assumed you already knew you can just repeat in one direction. Ah well, you know now.

Quote: "The main reason I am doing this is that I am creating a gradient background that cannot be repeated. I want to gradient background to fill the screen no matter what size resolution they are using."

jtwcs

brightsusan,

I am not that familiar with Photoshop myself but this website should help with the fading technique I was talking about.

http://www.skinyourscreen.com/site/Articles/creating-gradient-faded-patterns