Solutions to Display Landing-Page Specific Background

Hi everyone,

I am trying to display a background image in my landing page with a repeating 200x200 graphic in its own container. The way I inserted the background image is through the style attribute in the HTML markup because this design template is to be used multiple times, and now there can be a graphic like this one if i have one for this page.


<div id="lpbg" style="background:url("../style/homeinsurance.png") repeat;">

    <div id="lpheader"><!-- begin header div -->

        <h1>home & property insurance</h1>

& the styles:

#lpbg{width:1260px; height:auto; margin-top:15px;}

See the page for extended code at

You haven’t really asked a question :). Are you just trying to find ideas to make this more dynamic? I’d just assign the <body> a class depending on the page, and write a rule for each page/background that would differ.

Yeah, you don’t need an extra div for that. It will even make the page load slower since the browser has to load not only that background image, but also whatever background-image is assigned to the body in the CSS file (if there is one). Which is pointless if it’s not even gonna be seen.

Like RyanReese said, just add a class onto the body element and add the background in your main CSS file.

Given the screen shot you’ve posted, you’d have to break that into separate images if you want a different item to repeat on each page.

Why would you say that? He can still combine the images into a file.

I just meant that if he wants one of those items (like the house with a ring around it) to repeat across the page/element on its own, it needs to be in a separate image.

Okay, so what I hear is to drop the div and add a class to the <body> tag.

To elaborate on what I’m trying to achieve here, the gif image I attached to the thread is an example of the whole image I’d like to have repeating throughout the body. Also, the page that you may have visited is a site template, which will be used in excess of 20 times under different categories. So, a solution to adding a different graphic relevant to its category/niche/section seems yet to be found. I guess I can have 30+ different classes in the style sheet linking to 30+ different .gif images to be repeated.

I you want different styles on a page, it’s easy enough to add a special class to each page in the body tag. That’s often useful for other purposes, too. Do you really want an image like that repeated all over the background?

You basically have these options.

Well, maybe it will look ugly, and I’ll want to change my mind on it; however, I’d still like to overcome this to gain more experience in HTML/CSS.

After reading the material directed to by Ryan, here’s what I tried (with no success):

<body id="homeinsurance">


This got rid of the background already in place, which is already assigned to the <body>. I didn’t see the graphic repeating, just a plain white backdrop behind the content.

Um… something tells me this wasn’t an optimal way to go about this.

You omitted that bit from the styles you quoted in your first post. :slight_smile: In any case - I thought that was the object of the exercise - to change a generic background image for all pages into specific background images for specific pages. Is that not what you were after?

If you want to retain the current grey-scale background on body and add another background to the div #lpbg, then your code would need to be[/FONT]

#homeinsurance #lpbg {background: url("homeinsurance.gif");}

[FONT=Verdana]assuming, of course, that’s the correct filepath. As the image didn’t show when you tried it, it probably isn’t. :slight_smile: Your original image filepath is …/style/homeinsurance.png

That should work, in terms of adding the background image. FWIW, I’d guess the resulting page will then be unusable, but that’s not what you asked. :)[/FONT]