Background Tips and Tricks

Now here I am starting with something rather basic. Now you are probably asking me how I got the box like this? Here is the code:

<p style="background: #000000; color:#ffffff; padding: 15px;">Your Text Here</p>

Where I wrote your text here, that is where you put your text in.

The background is the black you see. Where the code says Background: #000000. This is what makes the background black. Please check out my lens titled The Guide to Colors On HTML. The link is below for your convenience.

Now lets have a bit of fun with images as backgrounds. I always like to use the colors itself for the background even though we won't be needing it. Its like a backup plan for if the image is not there. Now with this, this I am using an image as the background. I know it does not look perfect, but you get the idea. Here is the code:

<p style="border: double 5px #FFE4E1; color: #ffffff; background-color: #000000; background-image: url(ttp://images.onlinewriterscorner.com/1247195135/gallery_3_52980.png); padding: 10px">Your Text Here</p>

What the image is doing here is repeating itself. If you do not want it to repeat, then you would have to add repeat: no-repeat to the code. If you do want it to repeat and only in a certain direction, you would put in instead of no-repeat, you would choose repeat-x or repeat-y.

For the most part, I do not think you will need a fixed background but if you did, this is what you need to add:

background-attachment: fixed;

This took a little working, but I did get it figured out. The original way that I was going to do this, did not work. What I tried doing was with two pieces. Actually in a round about way, this came out better as its a lot easier for you to do. Basically, what it came down to is that it did work in Mozilla, but of course it didn't work in internet explorer. I made a border as a testing ground for this lens. You are probably asking me by now is what is the code? Come on, give it to me. Stop teasing me.

Do I have to give you the code? Do I really, really want to? Yeah, I should. Okay here goes:

<p style="border: solid 1px #000000; color: #ffffff; background-color: #000000; background-image: url(http://images.sidewindhost.com/1241911261/gallery_1_15_7349.png); padding-left: 120px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px">your text here</p>

You do not have to use my images, but its a start. If you can find borders, then save it to whatever you use to store images at. Then use that address and replace the address I used with the one you have. Where it says, your text here; replace it with your own. It was just a placeholder for you.