0

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
3
Views
8 Years
Discussion Span
Last Post by Troy III
0

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

0

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: Fixed formatting

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.