Am trying to do i gradient background but it comes out wrong

here

/* CSS Document */

html {
	background: url(../images/bg.jpg);
	background-repeat:repeat-x;
}

It looks like a graphics problem NOT a CSS one.

Looks like you got this worked out.

You may want to fix your image so the right side matches the left side exactly, that way it doesn't look chopped up like it does currently.

Thanks should of checked that.

i begin to study CSS,thanks for sharing.but what is the solution

It was the image its self as said in the post both sides was not matching making look like it did. So just just redid the image and now sorted

Originally Posted by cindyfowler

i begin to study CSS,thanks for sharing.but what is the solution

Could someone also look at the tel number on the top right in ie its goes behind the white image but in firefox its fine.
How can i get around this in IE.

URL: here

/* CSS Document */

html {
	background: url(../images/bg.gif);
	background-repeat:repeat-x;
}

body {
	padding: 0;
	margin: 0;
	font-family: Myraid Pro, Arial , serif;
}

#wrapper{
	width: 977px;
	margin: 0 auto;
}

#headertop {
	background: url(../images/top.png) no-repeat;
	width: 977px;
	height:41px;
	margin-top: 30px;
	
}

#headertop p {
	float:right;
	margin: 30px 30px 0 0;
	font-family: Myraid Pro, Arial , serif;
	font-size:20px;
	color: #9a151c
}

#header {
	background: #fff;
	margin: 0 0 0 9px;
	width: 960px;
	height:101px;
	
}

#logo {
	background: url(../images/logo.jpg);
	width: 314px;
	height: 77px;
	margin-left: 40px;
}

#nav {

	float: right;
	margin:  -40px 20px 0 0;
}

#nav ul {
	list-stlye-type:none;
}

#nav li {
	display: inline;
	margin: 0 2px 0 9px;
	color: #000;
}

#nav a {
	text-decoration: none;
	color: #000;
}

#banner {
	background: #fff url(../images/banner1.jpg) no-repeat 25px 25px;;
	width: 911px;
	height: 297px;
	padding: 0 49px 0 0;
	margin: 0 0 0 9px;
}

incidentally the gradient would be smoother as a jpeg rather than a gif but you pretty much got away with it

Will try a jpg later then see how that looks.

Any chances of you looking at post 7

Could someone also look at the tel number on the top right in ie its goes behind the white image but in firefox its fine.
How can i get around this in IE.

URL: here

/* CSS Document */

html {
	background: url(../images/bg.gif);
	background-repeat:repeat-x;
}

body {
	padding: 0;
	margin: 0;
	font-family: Myraid Pro, Arial , serif;
}

#wrapper{
	width: 977px;
	margin: 0 auto;
}

#headertop {
	background: url(../images/top.png) no-repeat;
	width: 977px;
	height:41px;
	margin-top: 30px;
	
}

#headertop p {
	float:right;
	margin: 30px 30px 0 0;
	font-family: Myraid Pro, Arial , serif;
	font-size:20px;
	color: #9a151c
}

#header {
	background: #fff;
	margin: 0 0 0 9px;
	width: 960px;
	height:101px;
	
}

#logo {
	background: url(../images/logo.jpg);
	width: 314px;
	height: 77px;
	margin-left: 40px;
}

#nav {

	float: right;
	margin:  -40px 20px 0 0;
}

#nav ul {
	list-stlye-type:none;
}

#nav li {
	display: inline;
	margin: 0 2px 0 9px;
	color: #000;
}

#nav a {
	text-decoration: none;
	color: #000;
}

#banner {
	background: #fff url(../images/banner1.jpg) no-repeat 25px 25px;;
	width: 911px;
	height: 297px;
	padding: 0 49px 0 0;
	margin: 0 0 0 9px;
}

Im getting a gap below the background image in <div id="headertop"> in IE6

Not tried it in ie 6 yet.

Originally Posted by PH!L

Im getting a gap below the background image in <div id="headertop"> in IE6