Dual-background positioning dilemma

[reuber1]

Don't know how many of you all checked it before, but in the site comp I posted before (http://www.graphicdesignforum.com/forum/showthread.php?t=23986&highlight=Opinions), I have what basically amounts to two different background elements. Unfortunately, they are both background images, as opposed to an image and a specified color. The two different background graphics are:

1. The guitar, which should be positioned at top-left.
2. A 1x2 pixel pattern, which should span the full width and height of the page, and sits behind the guitar.

I haven't coded anything yet, I'm just wondering if this is possible now that I've already gotten too far. I'm trying to see if there's a way to absolutely position a Div (for the guitar) and set a z-index lower than the rest of the page is, and leave the pattern as the background to body, html; but if everything else on the page is relative positioned, I'm under the impression that this won't even work.

Any ideas/suggestions?

[Drazan]

one way,

BODY tag: background as pattern

main "container div": have the guitar image as background

[reuber1]

I'll give that a shot. Doesn't the container div have to be a specific set width though, as this is going to be a page that has empty margins on the sides?

[chris_bcn]

you'll need a div that there's just for the image - it's not very semantic, but it's the only way

[Drazan]

/* CSS for second layer */

BODY {
background-image: url(images/background.jpg);
}
.container {
width: 100%;
}

.container-image {
background-image: url(images/guitar.png);
background-position: top left;
}

.content {
width: 800px;
}



This is just one way. If you wanted to do the z-index you could with an absolute position or even relative position if it is in the container.

Align the .content div to center.

[resdog]

You could use both the html and body properties:


html{
height:100%:
background-image:url(repeatedpattern.jpg);
}
body{
height:100%;
background:url(guitarimage.gif) no-repeat top left;
}


It works in Firefox, not sure about the other browsers, though.

[reuber1]

I'll give these methods a shot guys, and see what comes up. Thanks a bunch, I'll let you know how it goes. :cool:

[chris_bcn]

IE6 doesn't like the HTML tag to be styled. IE7 might, but IE6 will turn out some odd requests

[reuber1]

I've had luck using both methods in IE6 (even resdog's), IE7, Firefox, Opera, and Netscape. I don't have the ability to test on Safari or a Mac machine, but I think I'm at a point where I get a move on now.

Thanks peoples.