General Question

johnny0313x's avatar

Is it possible to have two backgrounds on a website?

Asked by johnny0313x (1860points) March 23rd, 2010

I have a website and the top header image is positioned at the top center and repeats horizontally. This works fine. However if I wanted to make a second background that repeats vertically and stays behind the head image, is this possible? Would I have to use z-index for this?

Observing members: 0 Composing members: 0

6 Answers

Jeruba's avatar

I’m not an expert, and I don’t know the code for it, but what if you made the top image a table equal to screen width and put the horizontal repeating image in it? Then it would appear to be overlaid on top of the vertical repeating image, so that the vertical one just takes off and repeats from there downward.

jrpowell's avatar

Just use nesting.
<div id=“container”>
<div id=“header”>
</div>
</div>

Use CSS to apply a background image to the container div.

jrpowell's avatar

And check the source of what I did in two hours after too many cans of PBR and jello shots. I submit this.. It pretty much does what you want in the most half-assed way.

njnyjobs's avatar

@Jeruba the problem with using a table is that the table width will be the default width of all the page content . . .unless the table only holds the BG image and the rest of the page content is free-flowing or set in another table.

@johnny0313x if you care to provide a link to the website here or as a PM, I would gladly look into it.

silverfly's avatar

Yup! Put a background on the HTML tag and a background on the BODY tag.

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther