View Full Version : Set margins on background?

05-31-2005, 10:22 PM
Ok, This is hard to describe but here it goes. I have some text on top of a background, and I moved the text around so that they overlap each other a tiny bit. The problem is, I can't seem to get the background to be closer around the text. I am trying to make a title bar for my site and it looks silly because there is too much background color. I want it to fit tightly around the text.

Here is the code so you can see what I mean.

<title>New Design</title>
<STYLE TYPE="text/css">
@import url(company.css);
H1 { background color: #330000; color: orange; font-family: impact }
P { background: #330000; font-family: courier }
A:link { text-decoration: none }
A:active { text-decoration: none }
A:visited { text-decoration: none }
B { font-size: 15pt; line-height: 20pt }
<body bgcolor="#000033">

<P STYLE="font-size: 30pt; color: green; font-family: papyrus, serif">This is a test</P>

<P STYLE="margin-top: -52px; margin-left: 0px; color: green; font-size: 28pt; font-weight: bold; font-family: papyrus, sans-serif">Offline</P>


Can I put margins on the background?

05-31-2005, 11:10 PM
I'm not sure, but the way I'd do it if you can't, is add padding to the body ( body { padding: 20px } etc), and then have everything inside a DIV which has a height and width of 100%, and has the background set as the background you want - should work.

06-01-2005, 12:05 AM
Could you (or anyone) please give me an example of of that? I don't quite understand how to pad it so that my background would line up with the text.

Thank you


06-01-2005, 01:12 AM
Sorry didn't actually preview the code before, but what I said kind of goes anyway - did you mean something like so ?

<title>New Design</title>
<style type="text/css">

@import url(company.css);

h1 { background color: #330000; color: orange; font-family: impact }
p { font-family: papyrus, sans-serif }

body { background-color: #000033 }

a { text-decoration: none }
b { font-size: 15pt; line-height: 20pt }

p.1 { font-size: 30pt; color: green }

p.2 {
margin-top: -52px;
margin-left: 0px;
color: green;
font-size: 28pt;
font-weight: bold;

#test { background-color: #330000; width: 280px }



<div id="test">
<p class="1">This is a test</p>
<p class="2">Offline</p>


And you shouldn't really use inline styles... :)

EDIT - Tidied it up a bit for you.

06-01-2005, 05:54 PM
Thank you Mark87.

But actually, that is not what I wanted, but with the code you gave me I was able to tweek it the way I wanted it. In stead of changeing the width of the banner, I wanted to make it more narrow. So I just changed width to height. Thanks man!

06-01-2005, 06:17 PM
lol ah ok, good good, glad you got it sorted. Next time perhaps try to be a bit more detailed in what you want. :)