Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

CSS background and header


COOLumbia

Recommended Posts

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?

Link to comment
Share on other sites

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

Everything's funny but nothing's a joke...

Link to comment
Share on other sites

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>

 

<style type="text/css"> <!--

 

.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>

 

<div class="logo"> <font size=5> THis is my logo </font></div>

 

<p> x </p>

<p> x </p>

<p> x </p>

<p> x </p>

<p> x </p>

<p> x </p>

<p> This <br>text <br>should <br>scroll <br>and <br>the <br>background<br>and<br>heading<br>should <br>remain<br>

fixed.<br>This <br>text <br>should <br>scroll <br>and <br>the <br>

background<br>and<br>heading<br>should <br>remain<br>fixed.<br>

</p>

 

<p align="center"><font size="1" face="Verdana">(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).</font></p>

</body>

</html>

Link to comment
Share on other sites

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

Everything's funny but nothing's a joke...

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...