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?
Latest News: (loading..)
0
3 replies to this topic
#2
Posted 12 June 2005, 06:01
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
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...
#3
Posted 12 June 2005, 09:07
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>
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>
