Member Avatar for AC-hrt

First, let me say that I'm an amateur with HTML and web design so please try to keep your explanations as blunt and frank as possible. Thanks in advance!

I'm wanting to have a repeating background image behind another fixed, non-repeating image.

This is the following code I have so far:

<style>
body {
	margin-top:0px;
	height:100%;
	background:url(Boneyard.png);
	background-repeat:no-repeat;
	background-position:top center;
	background-attachment:fixed;
}
html {
	margin-top:0px;
	height:100%;
	background:url(background.png);
	background-repeat:repeat;
	background-position:right top;
	background-attachment:fixed;
	background-color:transparent;
}
</style>

The fixed image appears but the background remains white without the repeating background appearing at all.
Please, help? Let me know if you need any more information.

  • 3 Contributors
  • 2 Replies
  • 121 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Troy III

Recommended Answers

All 2 Replies

Member Avatar for Airshow

The problem is that body and html are not completely independent. I just ran some tests (in IE6) and found that background-color is independent but background-image and background-repeat are not.

Other browsers may behave diferently.

A safe way to achieve what you are desire is to have a repeating body background, and for the non-repeating image to be an absolutely positioned HTML <img>.

<style>
body {
	margin-top:0px;
	background:url("background.png");
	background-repeat:repeat;
}
#boneyard {
	position:absolute;
	top:0;
	left:0;
}
<body>
<img id="boneyard" src="Boneyard.png">
.....
</body>

Airshow

Member Avatar for Troy III

First, let me say that I'm an amateur with HTML and web design so please try to keep your explanations as blunt and frank as possible. Thanks in advance!

I'm wanting to have a repeating background image behind another fixed, non-repeating image.

This is the following code I have so far:

<style>
body {
    margin-top:0px;
    height:100%;
    background:url(Boneyard.png);
    background-repeat:no-repeat;
    background-position:top center;
    background-attachment:fixed;
}
html {
    margin-top:0px;
    height:100%;
    background:url(background.png);
    background-repeat:repeat;
    background-position:right top;
    background-attachment:fixed;
    background-color:transparent;
}
</style>

The fixed image appears but the background remains white without the repeating background appearing at all.
Please, help? Let me know if you need any more information.

It can be achieved but ...

<style type="text/css">
html, body { border:none; margin: 0px; padding: 0px; 
      background: #fff url("background.png") right top fixed; }
body { background: transparent url("Boneyard.png") center top no-repeat fixed; padding-top: 1px; /* Mozillas/Opera fix!!! */}
</style>
<!--[if IE]> 
<style>
html, body { height: 100%; width: 100%; overflow: auto;  padding:0}</style>
<![endif]-->

Use it with precaution.

Edited by mike_2000_17 because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.