Need CSS for both background and a repeated image

[buckmajor]

Hi there

I have been trying for hours on how to do a background image and a repeated image for my ‘container div’ like this example:
Background image
[img]http://i144.photobucket.com/albums/r192/Big-Major_2007/bg-repeat-image.jpg[/img]
Repeated image
[img]http://i144.photobucket.com/albums/r192/Big-Major_2007/content-bg-repeat.jpg[/img]

or if you know another way of doing this?

I appreciate your help
CHEERS :)

[blue642]

To do 2 background images cross-browser, I believe you’d need 2 elements to apply them to.

You could try something like:
CSS:

Code:

#main-bg {
background: transparent url(http://i144.photobucket.com/albums/r192/Big-Major_2007/bg-repeat-image.jpg) no-repeat;
width: 1024px;
height: 700px;
padding-top: 345px;
}

#bg-repeat {
background: transparent url(http://i144.photobucket.com/albums/r192/Big-Major_2007/content-bg-repeat.jpg) repeat-y;
height: 350px;

}

HTML:

Code:

The main div contains the repeated image div and has a padding-top of equal to the main background image’s height.
The height’s were just put in there to give some sense of layout, they should not be added unless needed for the layout (the content should dictate the height though.)

this is assuming that you would have content in the top box, and content in the bottom repeated area, with no overlap.

I’m a newb as well so I don’t know if this is the BEST solution or if it is cross browser, but it worked in Firefox on Windows, here at work.

[buckmajor]

Hi blue642

I think this one works, need to finish it with the other box content. I will reply back soon with the result…

Sweet!

[buckmajor]

I tried to get this working, but when I tried to add my; navigation, text, or graphics, they were pushed down beneath the [#main bg]. It works only if I add a -300px padding-top, but then I will have to do that for all my content.

I did another screen example of how I want it done:
[img]http://i144.photobucket.com/albums/r192/Big-Major_2007/layout.jpg[/img]

Pretty much, the ‘Content’ and ‘Sidebar’ box displays on top of the [#main bg] and [#bg-repeat].

Any suggestions?

Thanks again
CHEERS :)

[buckmajor]

Sweet guys, problem solved. I had no choice but to remove the background image for the container and leave the repeated image as it is.

All is good.
CHEERS :)

[blue642]

To be honest on looking back, I don’t know where I came up with that "solution" it must have been one of my "out-of-the-box" thinking type days.

Here is a much simpler, and better solution.

http://i144.photobucket.com/albums/r192/Big-Major_2007/bg-repeat-image.jpg

It may be a little difficult to see, but the Red outlined divs, are your content, sidebar, and navigation areas. the black outlined was just part of the image you supplied, and I have no resource to remove it here at work…

The body gets the repeated image, and a container div, gets the main top image with no-repeat. (make sure the container is not positioned down at all, or you would reveal the repeated image above it.

Here is the CSS:

Code:

* {
margin: 0;
padding: 0;
}

body {
background: transparent url(http://i144.photobucket.com/albums/r192/Big-Major_2007/content-bg-repeat.jpg) repeat-y;
}

#container {
overflow: hidden;
width: 1024px;
background: transparent url(http://i144.photobucket.com/albums/r192/Big-Major_2007/bg-repeat-image.jpg) no-repeat;
background-position: 0 0;
}

#nav {
height: 75px;
}

#nav, #content, #sidebar {
border: 4px solid red;
margin: 0 5px 5px 0;
}

#content, #sidebar {
height: 700px;
margin: 7px;

}

#content {
width: 580px;
float: left;
}

#sidebar {
width: 400px;
float: right;
}

and HTML:

Code:

[buckmajor]

Cool! Thanks blue642, I got it working. I actually put my background image in the wrong box container, which was covered by the repeated background image, instead of bringing the image to the front, similar to using it like layers. Why didn’t I think of this before :roll: .

P.S The CSS you provided works, and it opened my eyes to find the error I made.

Too easy, another case solved.
CHEERS :)

[Author]

Posts