Sign In
Register
Help
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?
Page 1 of 1
CSS background and header
Can both be made non-scrollable?
Rate Topic:
MultiQuote
#2
Iggy 
- Group: Community Member
- Posts: 1,269
- Joined: 06-December 02
- Real Name:BOFH
- Gender:Male
- Location:Seattle, WA
Posted 12 June 2005 - 06:01 AM
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
COOLumbia
- Group: Community Member
- Posts: 133
- Joined: 20-April 05
- Real Name:Bob
- Location:COOLumbia, SC
Posted 12 June 2005 - 09:07 AM
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>
#4
Iggy
- Group: Community Member
- Posts: 1,269
- Joined: 06-December 02
- Real Name:BOFH
- Gender:Male
- Location:Seattle, WA
Posted 12 June 2005 - 09:19 AM
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
Iggy
Everything's funny but nothing's a joke...
Page 1 of 1