View Full Version : Gradient Background Color not in IE

11-02-2011, 06:52 PM
I'm trying to put a gradient background color on my web page. For IE, i'm using

filter : progid : DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');

But i have difficulties finding a good solution for other browsers. For opera, i tried using the following style on the body element:

background-image: -o-linear-gradient(bottom right,rgb(192,207,226),rgb(255,255,255));

But the gradient doesn't fill the whole page. I mean, my web page only has a few rows of text and the gradient finishes after the last row. Then, it starts again under, so i have two rows of gradient color. Plus that my web page is pretty wide, so the user has to use the scrollbar to navigate sideways. But the gradient only covers the visible part of the screen, so when i scroll to the right, it's just a white background.
Is there any way i could have a gradient color to cover the entire page?
I have to say, i don't use HTML and CSS very often, so maybe i'm missing something.
Thank you.

11-02-2011, 07:07 PM
Hello Anakin1989,
Hard to say without seeing your page but I would guess that background needs to be on the body.

11-02-2011, 07:40 PM
Hello Excavator, thanks for your reply.
The background is in the body. I will post the code, it is created by a servlet, so it's not very organized.

<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Baza De Date</title>
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');background-image: -o-linear-gradient(bottom right,rgb(192,207,226),rgb(255,255,255));" onLoad="document.getElementById(100).focus()">
<h1 align="center"><b>Baza de date medicament</b></h1><br>
<FORM METHOD="POST" ACTION="/ServletApp/servlet/TableView"><p style="font-family:arial;color:black;font-size:20px;">Tabelul pentru vizualizare</p><p><input TYPE="RADIO" NAME="radio1" VALUE="medicRadio"
onClick="submit()">Medic<input TYPE="RADIO" NAME="radio1" VALUE="pacientRadio"
onClick="submit()">Pacient<input TYPE="RADIO" NAME="radio1" VALUE="medicamentRadio"
onClick="submit()">Medicament<input TYPE="RADIO" NAME="radio1" VALUE="consultatieRadio"
onClick="submit()">Consultatie</p></FORM><BR><h4><font color="red"> </font><BR>
<FORM NAME=myform METHOD="POST" ACTION="/ServletApp/servlet/TableView">
<TABLE BORDER="1" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#3982DB', startColorstr='#98B6DA', gradientType='0');"><TR><TH>ID</TH><TH>Denumire</TH><TH>Sterge</TH></TR>
<TR><TD><INPUT TYPE="TEXT" NAME="medicamentID" SIZE=3 VALUE="1" readonly></TD><TD><INPUT TYPE="TEXT" NAME="denumire" SIZE=20 ID=100></TD></TR>
</TABLE><P><INPUT TYPE="SUBMIT" VALUE="Update database" NAME="B1"></P></FORM>

11-02-2011, 08:21 PM
Giving the document a 100% height might help. Another line or two from the CSS will help with other browsers, try this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baza De Date</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
body {
background: #fff;
background: -moz-linear-gradient(top, #fff, #c0cfe2);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0cfe2));
color: #000;
height: auto;
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');>
<h1 align="center"><b>Baza de date medicament</b></h1>
<FORM METHOD="POST" ACTION="/ServletApp/servlet/TableView">
<p style="font-family:arial;color:black;font-size:20px;">Tabelul pentru vizualizare</p>
<input TYPE="RADIO" NAME="radio1" VALUE="medicRadio"
<input TYPE="RADIO" NAME="radio1" VALUE="pacientRadio"
<input TYPE="RADIO" NAME="radio1" VALUE="medicamentRadio"
<input TYPE="RADIO" NAME="radio1" VALUE="consultatieRadio"
<h4><font color="red"> </font><BR>
<FORM NAME=myform METHOD="POST" ACTION="/ServletApp/servlet/TableView">
<TABLE BORDER="1" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#3982DB', startColorstr='#98B6DA', gradientType='0');">
<TD><INPUT TYPE="TEXT" NAME="medicamentID" SIZE=3 VALUE="1" readonly></TD>
<TD><INPUT TYPE="TEXT" NAME="denumire" SIZE=20 ID=100></TD>
<INPUT TYPE="SUBMIT" VALUE="Update database" NAME="B1">

11-03-2011, 11:39 AM
It works perfectly, thank you very much!