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.
brightsusanAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

DT20ThreeCommented:
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.
brightsusanAuthor Commented:
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.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

jtwcsCommented:
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;
brightsusanAuthor Commented:
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
jtwcsCommented:
Take a look at the attached code... Is this what you were trying to accomplish?

A couple of other suggestions....

Since you are using a texture iin the image the image does not blend that well with a background color as is.  I would suggest blending the texture into a flat color that you will also use as the background color.  It will make the transition from background image to color seamless.

I also noticed that the image file was quite large and I would recommend that you optimize it as best you can for the web.  The smaller the file, the quicker it loads and the happier the end user is.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cosmetic Dentistry, General Dentistry, Travis P. Phillips Dmd LLC, Oxford, AL</title>
<meta name="Keywords" content="cosmetic dentistry, general dentistry, travis p phillips dmd llc, oxford, alabama">
<meta name="Description" content=" Travis P. Phillips, DMD, LLC provides affordable cosmetic and general dentistry to the Oxford, ALabama, area. We offer the following services to you and your family General Dentistry, Surgery, Meticulous Infection Control, Cosmetics, Endodontics, Whitening, and Implant Service.">

<style type="text/css">

body{
	background: #4B4949 url(http://www.brightideaswebdesign.com/Travis-Phillips/images-oxford-dentist/dentist-office-background-650.png) repeat-x;
	font-family:Tahoma, Geneva, sans-serif; 
	font-size:13px;
	color: #000; 
	margin: 0;
	padding: 0;
}

#container{
	width:950px;
	margin: 15px auto 0 auto;
	padding: 0;
	text-align:center;
}

#content{
	height:675px;
	background: #CCC;
	margin: 0;
}

#footer{
	height:75px;
	background: #999;
	margin: 0;
	padding: 0;
}

</style>

</head>
<body>

<div id="container">
	<div id="content"></div>
	<div id="footer"></div>
</div>

</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brightsusanAuthor Commented:
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?  
DT20ThreeCommented:
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."
jtwcsCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.