CSS background and header

COOLumbia · June 12, 2005

I know nothing about CSS but wanted to have a tiled background image (fixed, non-scrollable) on a [non-OSC] page, as well as a fixed heading at the top of the page, like a logo. The logo could be either an image, or just a text box. I was told that this might be possible using an HTML statement AND a BODY statement in CSS, but when I try using them both, one or the other disappears. I can't seem to get both a background and a heading to be fixed. Is this not possible?

Iggy · June 12, 2005

Probably best to find a board that specializes in these kinds of questions but the css background should be easy and a div tag with a class would suffice to anchor an image anywhere on the page.

Something like this

body {

margin-top: 0px;

margin-left: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #000000;

color: #000000;

font-family: Verdana, Geneva, Arial, Helvetica;

font-size: 12px;

line-height: 16px;

background-image: url(/images/BG.gif);

background-repeat: yes;

}

And

.logo { position: absolute; top: 0px; left: 0px; }

Maybe?

Keep trying! You'll get it!

Iggy

COOLumbia · June 12, 2005

Thanks, Iggy.

I tried the BODY and LOGO statements as you suggested, but the heading does not remain fixed; it scrolls like all the other text. Is there some parameter to indicate "fixed" or "non-scroll" that has to be added?

<html>

<head>

.yo:hover { background-color: yellow; }

.logo { position: absolute; top: 20px; left: 80px; line-height: 30px; }

body

{

margin-top: 0px;

margin-left: 4px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #000000;

color: #000000;

font-family: Verdana, Geneva, Arial, Helvetica;

font-size: 14px;

line-height: 18px;

background-image: url('images/brix.gif');

background-repeat: yes;

background-attachment: fixed;

background-position: 0px;

}

--></style>

</head>

<body>

x

This text should scroll and the background and heading should remain

fixed. This text should scroll and the

background and heading should remain fixed.

(If you're daffy about dolphins,

as I am, be sure to visit <a class="yo" href="http://www.darlindolphins.com">DarlinDolphins.com</a>,

our web store devoted exclusively to dolphin items).

</body>

</html>

Iggy · June 12, 2005

You'll have to monkey around the position and possibly put it on a layer. But Google will sort it for you pretty quickly.

Iggy

CSS background and header

Recommended Posts

COOLumbia

Iggy

COOLumbia

Iggy

Archived

Browse

Activity