CSS - Horizontal Gradient Fill Using Background-color Property

Hi all, I have searched all over and can't seem to find an answer. I am looking for a template or tutorial on how to build a center content area with a drop shadow on top of a gradient background. An exact example would be:

www.fatwallet.com
points2shop.com

Thanks for any guidance!

My apologies if this is a total newb question, however I am quite a newb with CSS (but trying to learn).

What I am trying to do is change a color (say red) from position 0,0 to black at position 100,100. I am sure this is possible as I have seen a couple of close examples but nothing that matches what I am trying to do (and I must admit with my limited understanding of CSS I can't figure it out).

ANy help will be greatly appreciated.

Thanks.

TJ

My css has the following code:

Code:

table.main {
margin: 0px;
padding: 0px;
background-color: darkcyan;
}

body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
margin: 0px;
padding: 0px;
/* fallback (Opera) */
background: #9933CC;
/* Mozilla: */
background: -moz-linear-gradient(top, #9933CC, #E8E8E8);
/* Chrome, Safari:*/
background: -webkit-gradient(linear, left top, left bottom, from(#9933CC), to(#E8E8E8));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#9933CC', EndColorStr='#E8E8E8', GradientType=0);
}

The main table is colored correctly and the gradient background works...but it stops at the bottom of the main table and restarts until the bottom of the page (my monitor is a nice bigger one so it's taller vertically than the web page).

how do i make the gradient last the entire page?

thanks in advance!!!

-gavman

Hey everyone. Can anyone tell me why the blue container backgrounds on my development site... http://cmsbase.stealthwd.ca are having a gradient in ie? I'm talking about the news, twitter, main copy etc containers. It's supposed to just repeat the image, but its making the image a gradient from left to right.

Other browsers are fine.

Please and thanks!

How do i set a font outline color as red and the fill with white using css. Does anyone know?

I've exhausted my own knowledge toolbox and cannot get this to work. I'm trying to get a div to expand to the end of the parent div.

http://www.pictouunited.com/?s=null

You'll see what I mean. I've done all the logical troubleshooting, or so I thought.

I appreciate any help in advance!

Given an element of a fixed width but varying heights, is there a way to give that element a gradient background that would scale to the height? I would be really impressed if someone could show me a way. Thanks.

Hi all,

I think I came across it a while ago, but I can not find it now. There was this trick on how to make a CSS gradient background,

it was something like

background-color: #123456 50%;

or something like it. That thing is supposed to fill up a table cell or an entire page with gradient background, if anybody knows what I am saying, assist me, please. I wish I could describe it better than that, but I don't think I can!

Thank you,

Chris

Hi there,
I'm making a CakePHP application to display my friend's artwork. I'm having trouble with the style sheet though. The header and footer are made of two fading images. I've used the background image property to stretch these images to fill the divs and have made the divs stretch to fill the width of the page.

At this point it's probably easiest to see what I mean by taking a look for yourself-

http://www.seb.webege.com/paintings/gallery

If you view this page in Chrome or Firefox then you'll see the desired effect with the image filling the width of the page. The problem comes with Safari and IE. In these browsers the image does not stretch to fill the screen.

I am not an expert at HTML/CSS and can't for the life of me work out what has gone wrong or what I can do to fix it, after numerous google searches I'm still none the wiser and I'm just not seeing the problem.

Can anyone advise me how to get the images to stretch to the browser width in Safari and Explorer? Any help would really be appreciated.

Many thanks,

Nick

I'm trying to create an image that will adjust to fit the screen size and always be at least 100% of the screen.

Basically, I'm looking to have the "trunk" image in the LeftBody div, always stretch to reach the image in the banner and the footer. If I have enough content, the image will repeat just fine and fill my needs, but if there is no content, how can i make the image fit the page?

My code is accessible via the /Samples/ directory.

Thanks so much...

midcitybrewery.com/Samples/sample.html

I'm trying to create some links that swap background images when you mouseover them. The non-CSS solution (which looks exactly how I want it to look) is located he

http://84.9.221.75/domains/backingt...Musicindex.html

My attempt at creating a CSS equivalent of those links is located on this page:

http://84.9.221.75/domains/backingt...Musicindex.html

I just need some help with the CSS I'm using on the latter page...I read up a little on how to do this, but it's obvious I'm still doing something wrong...

I need the buttons and the text inside the buttons to line up and appear like they do in the first URL....can anyone give me some pointers here? Thank you.

www.clydesdaleframes.com/test/fortran.html

Does anyone know why my "next page" button's background is extending the full width of the text like that?

css is www.clydesdaleframes.com/test/styles.css

thanks in advance,
Chris

hello all,

I am not very well experienced with CSS, so, please, bear with me. this question may sound stupid.

I have a web page that is comprised of one main table. Except for the banner on top (1 column), the main row has two columns. These columns will comprise of: 1) left column: Menu 2) right column: page content. In the left column, the menu, I would like to have a background image sitting behind the menu.

I have attempted to use CSS to put an image behind the menu:

Code:

.menu_back      {background: url('Pics/Web/menu_background.jpg') no-repeat #ffffff;}

And my html looks like this:

Code:

<table width = "100%"  class = "menu_back">

This does not work. After scouring the web without any real success , I humbly ask for ur help. I am designing for Firefox hoping it will work fine under IE. Thanking u in advance.

hey, i have 2 CSS problems.

number 1: my main <div> is not centered in IE. it's fine in FF, mozilla, and opera, but it stays all the way to the left in IE.

Code:

#main { width: 77%; margin: 0 auto; border: 1px solid #999; overflow: auto; background: #970303; color: #FFF; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; }

Code:

<div id='main' align='center'>

number 2: i can't figure out this gradient background stuff. i have an image, 1 px wide and 1000 px high. it works fine, but once theres enough information on a page, and its longer than the 1000px, the image starts over and looks extremely unprofessional. how can i make so that the one gradient image is stretched out for the length of the page?

thanks.

Hey,

I have a feeling that this will not be difficult to solve, but I've come to the point where I don't really know what to do any more. They say two heads are better than one; that's why working in a team is so great, because there are people from different walks of life. So, any help you can provide me from your experiences would be great!

I have five buttons that do not show up on firefox, and the images are called into play through CSS using background.

You will find the code below:

This is the CSS:
Code:

.borderBelowNav
{
	position: absolute;
	top: 0;
	left: 80px;
	width: 937px;
	height: 141px;
	z-index: 2;
}
img.borderBelowNav
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.divNav
{
	position: absolute;
	top: 55px;
	left: 175px;
	width: 785px;
	height: 61px;
	z-index: 3;
}

ul#mainNav,
ul#mainNav li
{
	margin: 0; 
	padding: 0; 
}

ul#mainNav li
{
	display: inline;
}

ul#mainNav li a
{
	width: 138px;
	height: 69px;
}

ul#mainNav li#quienesSomos a
{
	width: 138px;
	background:  url(../images/quienesSection.gif)
		      no-repeat 0 0;
	top: 0;
	left: 0;
}

ul#mainNav li#quienesSomos a:hover
{
	background-position: 0 -72.9px;
	top: 0;
	left: 0;
}

ul#mainNav li#campamentos a
{
	width: 138px;
	background: url(../images/campamentosSection.gif) no-repeat 12px 0;
	top: 0;
	left: 0;
}

ul#mainNav li#campamentos a:hover
{
	background-position: 12px -71.2px;
	top: 0;
	left: 0;
}

ul#mainNav li#noticias a
{
	width: 150px;
	background: url(../images/noticiasSection.gif) no-repeat 14px 0;
	top: 0;
	left: 0;
}

ul#mainNav li#noticias a:hover
{
	background-position: 14px -72.5px;
	top: 0;
	left: 0;
}

ul#mainNav li#aplicacion a
{
	width: 150px;
	background: url(../images/aplicacionSection.gif) no-repeat 0px 0;
	top: 0;
	left: 0;
}

ul#mainNav li#aplicacion a:hover
{
	background-position: 0px -76.1px;
	top: 0;
	left: 0;
}

ul#mainNav li#contactos a
{
	width: 150px;
	background: url(../images/contactosSection.gif) no-repeat 0px 0;
	top: 0;
	left: 0;
}

ul#mainNav li#contactos a:hover
{
	background-position: 0px -72.2px;
	top: 0;
	left: 0;
}

This is the HTML:
Code:

<img class="background" src="images/treesInFog.jpg" alt="" />
<img class="innerBackground" src="images/bgroundmain02.jpg" alt="" />

<!--This div is for the black border behind the nav-->
<div class="borderBelowNav">
	<img class="borderBelowNav" src="images/borderBelowNav.jpg" alt="" />
</div>

<div class="divNav">
	<ul id="mainNav">
		<li id="quienesSomos"><a href="quienesSomos.php" title="Quienes Somos"> </a></li>
		<li id="campamentos"><a href="campamentos.php" title="Campamentos"> </a></li>
		<li id="noticias"><a href="#" title="Noticias"> </a></li>
		<li id="aplicacion"><a href="aplicacion.php" title="Aplicacion"> </a></li>
		<li id="contactos"><a href="#" title="Contactos"> </a></li>
	</ul>
</div>