# Gradient Background Alignment Problem (Firefox/IE Issue)

**URL:** <https://forum.kirupa.com/t/gradient-background-alignment-problem-firefox-ie-issue/170497>\
**Category:** web dev\
**Created:** [November 26, 2005, 8:13pm UTC](https://forum.kirupa.com/t/gradient-background-alignment-problem-firefox-ie-issue/170497 "2005-11-26T20:13:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nick](https://avatars.discourse-cdn.com/v4/letter/n/f9ae1b/32.png) [@Nick](https://forum.kirupa.com/u/Nick)\
**Post date:** [November 26, 2005, 8:13pm UTC](https://forum.kirupa.com/t/gradient-background-alignment-problem-firefox-ie-issue/170497/1 "2005-11-26T20:13:05Z")

</div>

Howdy,

I’m not an expert at css but I use it from time to time. Recently, I wanted to have a gradient style background. Basically, I made the background color a dark red colour and made a gradient image repeat across which gave it the “gradient” look.However, IE and Firefox totally mess up the alignment - I can make it look good in one browser but not the other! I don’t undestand what they’re doing differently. All I’ve noticed is that they don’t display it properly and that Firefox has a scroll bar for some reasoon (my website isn’t long!). Do you guys know what the problem is or any possibly fixes/alternatives? Many thanks.

Screenshot:

CSS:

> 

html, body, #contents {  
min-height: 100%;  
width: 100%;  
height: 100%;

background-image:url(“Sliced Back/images/background.png”);  
background-repeat: repeat-x;  
background-color: #7d0504;

}

I also have a header (the black thing on top) on the site with this code:

> 

\<div id=“header”\> \<img src=“Sliced%20Back/images/site\_01.gif” align=“left” border=“0”\> \<A [HREF="mailto:x@x.com](mailto:HREF=%22mailto:x@x.com)"\>\<img src=“Sliced%20Back/images/site\_05.gif” align=“right” border=“0”\>\</A\> \<img src=“Sliced%20Back/images/site\_08.gif” align=“right” border=“0”\>  
\</div\>

Thanks again.