1. Home
  2. Forums Index
  3. Browser Side / HTML 8:16 pm May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

background repeating when it should not

i've tried no-repeat using both html and css; neither works; please help!

         

i like your sleeves

9:09 pm on May 18, 2006 (gmt 0)

10+ Year Member



i am working on a site that has essentially one background image. i've been trying to have the background image not repeat, but i've been unsuccessful. i have an external stylesheet, and i've tried specifying the background image and repeat in both the css and on the html page - neither works. my html page is made up of three includes, each in its own div. i'll paste that code below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>blahblahblah</title>
<meta name="description" content="blahblahblah">
<meta name="keywords" content="blahblahblah">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css">
</head>
<body bgcolor="#E0E3E8" background="images/home-boxes2.jpg">
<div id="header" style="width:800px; height:140px; z-index:100; overflow: visible;">
<!--#include virtual="topnavbar.inc"-->
</div>
<div id="content-nav" style="width:800px; height:140px; z-index:0; overflow: visible;">
<!--#include virtual="home.inc"-->
<div id="footer-main" style="width:800px; height:23px; z-index:0; overflow:visible;">
<!--#include virtual="bottomnavbar.inc"-->
</div>
</div>
</body>
</html>

the above file does specify the background image, but when i try to do it in css, i remove that (background="images/home-boxes2.jpg").

below i will put the relevant part of my css:
#header {
background-image:url(header.gif);
background-repeat:no-repeat;
height:140px;
width:1000px;
position:absolute;
left:-1px;
top:-1px;
}

please help! i am so frustrated. it's probably something so simple, i will laugh when i read the solution. but right now, i feel like crying.

thank you so much for your help.

encyclo

1:32 am on May 19, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



When trying your markup, it works as expected in Firefox and Opera, meaning the background image does not repeat. The precise markup I used to test is: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test template</title>
<style type="text/css">
#header {
background-image:url(biglogo2.gif);
background-repeat:no-repeat;
height:140px;
width:1000px;
position:absolute;
left:-1px;
top:-1px;
}
</style>
</head>
<body>
<div id="header" style="width:800px; height:140px; z-index:100; overflow: visible;">text</div>
</body>
</html>

Bear in mind that you are overriding the height/width with the inline style, so you have some unnecessary duplication there.

Does your page validate for HTML and CSS? Did you completely clear the browser cache?

i like your sleeves

6:08 pm on May 19, 2006 (gmt 0)

10+ Year Member



hi encyclo, thank you for responding. you were right about the contradicting width/height. i fixed that, and tried it again. the background now works correctly - it does not repeat.

however, now there is a horizontal scrollbar the width of the background. i'll paste my html and css below. i have cleared my cache, and the page does validate, but the hor. scroll is odd, like it's being read as an image instead of the background. do you see something wrong? (i've tried it not specifying the width and height in the css, but then no background shows at all.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>blah</title>
<meta name="description" content="blah">
<meta name="keywords" content="blah">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="index-style.css">
</head>
<body bgcolor="#E0E3E8">
<div id="header" style="z-index:100; overflow: visible;">
<!--#include virtual="topnavbar.inc"-->
</div>
<div id="content-nav" style="z-index:0; overflow: visible;">
<!--#include virtual="home.inc"-->
<div id="footer-main" style="width:800px; height:23px; z-index:0; overflow:visible;">
<!--#include virtual="bottomnavbar.inc"-->
</div>
</div>
</body>
</html>

#header {
background-image:url(images/header.gif);
background-repeat:no-repeat;
height:141px;
width:1500px;
position:absolute;
left:-1px;
top:-1px;
}

not sure that it would matter, but i've viewed it in safari, firefox, ie. i appreciate your help.

encyclo

12:38 am on May 20, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This is because you are using absolute positioning, which takes the element out of the document flow - if you don't specify the dimensions and there is no content, then nothing will show.

What does 

#header
actually contain?

i like your sleeves

2:12 pm on May 22, 2006 (gmt 0)

10+ Year Member



encyclo - the #header is the topnavbar for my site. it contains the main navigation. using includes, each html page is made up of several .inc files inside of divs, referenced on each html page. the #header div contains topnavbar.inc, which i will paste below after removing any reference to my company.

i use absolute positioning because the background needs to be positioned at the top left of the browser, and i was unable to achieve this by using relative positioning.

on most pages, the background specified in #header is the only background. but there are some where another div (#content or #content-nav) also has a header. however, the horizontal scrollbar appears on *every* page that references style.css, which is where the #header is.

below i'll put a company-name-removed version of my topnavbar.inc (which is what the #header contains).

<script language="JavaScript" type="text/javascript">
<!--
java rollover menu
//-->
</script>
<script language="JavaScript1.2" src="mm_menu.js" type="text/javascript"></script>
<script language="JavaScript1.2" type="text/javascript">mmLoadMenus();</script>
<table border="0" cellpadding="0" cellspacing="0" width="800">

<tr>
<td><img src="/images/spacer.gif" width="88" height="1" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="50" height="1" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="50" height="1" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="101" height="1" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="100" height="1" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="100" height="1" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="101" height="1" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="100" height="1" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="45" height="1" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="41" height="1" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="14" height="1" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="5" height="1" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="5" height="1" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>

<tr>
<td colspan="13"><img name="topnavbar3_r1_c1" src="/images/topnavbar3_r1_c1.gif" width="800" height="24" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="1" height="24" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="3" colspan="2"><a href="/name.html"><img name="topnavbar3_r2_c1" src="/images/topnavbar3_r2_c1.gif" width="138" height="41" border="0" alt="home"></a></td>
<td colspan="11"><img name="topnavbar3_r2_c3" src="/images/topnavbar3_r2_c3.gif" width="662" height="23" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="1" height="23" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="7" colspan="7"><img name="topnavbar3_r3_c3" src="/images/topnavbar3_r3_c3.gif" width="597" height="61" border="0" alt=""></td>
<td><a href="/name.html"><img name="topnavbar3_r3_c10" src="/images/topnavbar3_r3_c10.gif" width="41" height="13" border="0" alt="name"></a></td>
<td rowspan="3" colspan="3"><img name="topnavbar3_r3_c11" src="/images/topnavbar3_r3_c11.gif" width="24" height="19" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="1" height="13" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img name="topnavbar3_r4_c10" src="/images/topnavbar3_r4_c10.gif" width="41" height="6" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="1" height="5" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="5" colspan="2"><img name="topnavbar3_r5_c1" src="/images/topnavbar3_r5_c1.gif" width="138" height="43" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2"><a href="/name.html"><img name="topnavbar3_r6_c10" src="/images/topnavbar3_r6_c10.gif" width="55" height="12" border="0" alt="name"></a></td>
<td rowspan="2" colspan="2"><img name="topnavbar3_r6_c12" src="/images/topnavbar3_r6_c12.gif" width="10" height="20" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="1" height="12" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2"><img name="topnavbar3_r7_c10" src="/images/topnavbar3_r7_c10.gif" width="55" height="8" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="1" height="8" border="0" alt=""></td>
</tr>
<tr>
<td colspan="3"><a href="/name.html"><img name="topnavbar3_r8_c10" src="/images/topnavbar3_r8_c10.gif" width="60" height="11" border="0" alt="name name"></a></td>
<td rowspan="2"><img name="topnavbar3_r8_c13" src="/images/topnavbar3_r8_c13.gif" width="5" height="22" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="1" height="11" border="0" alt=""></td>
</tr>
<tr>
<td colspan="3"><img name="topnavbar3_r9_c10" src="/images/topnavbar3_r9_c10.gif" width="60" height="11" border="0" alt=""></td>
<td><img src="/images/spacer.gif" width="1" height="11" border="0" alt=""></td>
</tr>
<tr>
<td><a href="/name.html"><img name="topnavbar3_r10_c1" src="/images/topnavbar3_r10_c1.gif" width="88" height="32" border="0" alt="name"></a></td>
<td colspan="2"><a href="/name.html" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0915092507_0,0,30,null,'topnavbar3_r10_c2');"><img name="topnavbar3_r10_c2" src="/images/topnavbar3_r10_c2.gif" width="100" height="32" border="0" alt="name"></a></td>
<td><a href="/name.html" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0915092507_1,0,30,null,'topnavbar3_r10_c4');"><img name="topnavbar3_r10_c4" src="/images/topnavbar3_r10_c4.gif" width="101" height="32" border="0" alt="name"></a></td>
<td><a href="/name.html" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0915092507_2,0,30,null,'topnavbar3_r10_c5');"><img name="topnavbar3_r10_c5" src="/images/topnavbar3_r10_c5.gif" width="100" height="32" border="0" alt="name"></a></td>
<td><a href="/name.html"><img name="topnavbar3_r10_c6" src="/images/topnavbar3_r10_c6.gif" width="100" height="32" border="0" alt="about us"></a></td>
<td><a href="/name.html" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0915092507_3,0,30,null,'topnavbar3_r10_c7');"><img name="topnavbar3_r10_c7" src="/images/topnavbar3_r10_c7.gif" width="101" height="32" border="0" alt="name name"></a></td>
<td><a href="http://name.com" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0915092507_4,0,30,null,'topnavbar3_r10_c8');"><img name="topnavbar3_r10_c8" src="/images/topnavbar3_r10_c8.gif" width="100" height="32" border="0" alt="name name"></a></td>
<td colspan="5"><a href="/name-name.html" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0915092507_5,-70,30,null,'topnavbar3_r10_c9');"><img name="topnavbar3_r10_c9" src="/images/topnavbar3_r10_c9.gif" width="110" height="32" border="0" alt="name name"></a></td>
<td><img src="/images/spacer.gif" width="1" height="32" border="0" alt=""></td>
</tr>
</table>

since you said that absolute positioning takes the header out of the normal flow, i tried fixed positioning, (thought maybe it would work even though it's a version of absolute)

it removes the hor. scroll. the site then looks correct on macs (firefox, etc.) but on a pc, (ie) the #header including background and topnavbar navigation are not positioned in the top left corner. they're about 25 pixels down and to the right. i'll paste that version of the css from my external stylesheet below.

#header {
background-image:url('./images/header.gif');
background-repeat:no-repeat;
position: fixed;
width: 1499px;
height: 141px;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

if i have one huge background (that covers the whole entire viewport area), i can make that work. but because it makes the page so heavy and greatly increases load time, i have been working to find the more efficient [correct?] option.

thank you for your continued help. i appreciate it.

mcvoid

7:13 pm on May 23, 2006 (gmt 0)

10+ Year Member



I'm not 100% sure what you're asking...
Are you saying that you want a background image of a div lined up in relation to the browser viewport? If so, background-attachment: fixed; will line it up automatically, but there's two side effects that you might not like.
1) It will stay lined up to the viewport even when you scroll down and
2) It won't work at all in IE6 or earlier and just show the background aligned with the corner of the Div.
Are you ok with that? Since everybody that actively uses my page is addicted to Firefox, I never had a problem with using it, but there are plenty of people here that develop to the lowest common denominator.

i like your sleeves

7:38 pm on May 23, 2006 (gmt 0)

10+ Year Member



that's basically it - i want the background of the #header div to line up at the top left corner, without giving me a horizontal scrollbar. i'd be fine if the header stayed during scroll. it contains the main navagation, so that would be fine. but there is something in the code that must not be compatible, and i can't figure out what it is.

background-attachment: fixed; removes the background, and it gives me back the horizontal scrollbar that i dont want.

is there something wrong or some sort of imcompatibility in the code that i've posted? the pages (including the css) validate, but they look wrong.

walrus

7:55 pm on May 23, 2006 (gmt 0)

10+ Year Member



I must be missing something as im not to familiar with css but in the last example the width is 1500.

Is'nt that going to happen if you dont use 100% width because you are forcing any 600x800 or 1024x768 set browsers to scroll.

i like your sleeves

8:10 pm on May 23, 2006 (gmt 0)

10+ Year Member



that is one of the many variations i have tried. i used 100% for width and a percentage (20%, 15%, 25%) for the height, but that still gave me a horizontal scrollbar.

i tried using a different pixel width but that cut off the background at whatever width i specified. i use a rather large viewport, but this site's main users (90%) are pc users who use either 800x600 or 1024x768.

the header (background) is a bar graphic that i want to continue the whole width of the page.

shouldn't the background just *be* the background, like when you specify bg in html?! surely it is possible to have a background, specified in css, that is a div background, but also happens to be the background of the page, correct?

mcvoid

8:18 pm on May 23, 2006 (gmt 0)

10+ Year Member



hmmm... something isn't making too much sense to me. There's much I don't know about the little things of CSS - including fixed background images and z-index. If the background is fixed to the viewort, would the header's background color be brought up to the front, above the background image? Try making the background color of the div to transparent, maybe? I think background color is an inherited attribute, so it would be it's value from the body. Also, if everything has the same z-index, wouldn't it be ok to remove it? - I'll have to check my big book o' CSS later today when I can get to it. I'll be able to test and troubleshoot it then as well.

to answer your question - background in CSS is a compund selector - it's background-color, image, position, attachment, and z-index all in one, so you can say something like {background: 0,0, red, url("a.jpg");} and whatnot. I like to spell it all out in different selectors so I know what each number means, though.

i like your sleeves

8:25 pm on May 23, 2006 (gmt 0)

10+ Year Member



i think that when you have not specified background color, the default is transparent. (or am i misunderstanding what you mean?) but there's an image there, so i'm not even specifying a color.

also, the header div (topnavbar.inc) has a z-index of 100 so it's above everything else. i need it to be above everything else because of the javascript rollover menu.

?

mcvoid

8:33 pm on May 23, 2006 (gmt 0)

10+ Year Member



I double-checked the CSS1 specification and you are right, the default is transparent for background color, but the backgound color is still defined with a background image in place (in case you want an image that does not fill the entire area or want a semi-transparent .png or .gif as the background that will show through to another color).
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 8:16 pm May 1, 2026