CSS Question: Bacground image

jamman

jamman

Banned
Dec 31, 2007
151
1
0
Illinois
Edit - Background* title fail

Okay,
I have a small background image I want to tile across the background of a page.

I go to edit the CSS- currently I see: background: transparent

I want to use the image located in root/images/bg.jpg

What do i need to change the text to after "background:" to take the image I want and tile it as the bg.

Thanks


-edit

I found this: http://www.devx.com/tips/Tip/12957
Code: 
<HTML>
<HEAD>

<STYLE TYPE="text/css">
.vert {background-image: url(myImage.gif); background-repeat: repeat-y;}
.horiz {background-image: url(myImage.gif); background-repeat: repeat-x;}
.both {background-image: url(myImage.gif); background-repeat: repeat;}
</STYLE> 
</HEAD>

<BODY CLASS = "vert">


</BODY>
</HTML>

But is there not someway to just edit the line in the style sheet which contains, "background:"
 


actually you can use this in your CSS:

HTML: 
body {
background-image: url(root/images/bg.jpg);
background-repeat: repeat-x;
}

Replace x with y if needed or use both (xy) to repeat the image horizontally/vertically :)
 
I usually use the short method. For example if I wanted to have a background that repeated horizontally accross the top, but had red for the rest of the background (or transparent)

Code: 
...
div.hor { background: #f00 url('images/bg.jpg') repeat-x 0 0; }
...
basically Color Image Repeat Start-Y Start-X

likewise you could just shove something in the corner with

background: transparent url('images/bg.jpg') no-repeat top right;
 
Thanks for the advice.
Here is what i did and it worked:
I added this just before the </head> tag:
Code: 
<STYLE TYPE="text/css">
.vert {background-image: url(images/mybg.gif); background-repeat: repeat-y;}
.horiz {background-image: url(images/mybg.gif); background-repeat: repeat-x;}
.both {background-image: url(images/mybg.gif); background-repeat: repeat;}
</STYLE>

The after the <body> tag I added:
Code: 
<BODY CLASS = "both">

All of this on the index file.

Thanks again for the help
 
Seriously, you only need to add the image to the body just like Xdreamer said. All this crazy .vert, .horz, .both, is completely unnecessary.

CSS Background

w3 schools explains every CSS class in detail. If you use Dreamweaver the O'Reilly CSS reference book by Eric Myers is built right in as well.

Code: 
body {
  background: #000 url(images/bgtile.png) repeat-x;
}

repeat-X if you want it to tile horizontally.
repeat-y if you want it to tile vertically.
no-repeat if you only want to show it once.

Leave the repeat off all together and it will tile in both directions.

Kblessinggr put the 0 0 in his to represent X, Y positioning. You can use things like center top, and other descriptors there as well.

Link your style sheets externally if you aren't doing so. Sticking all the CSS into each page is a waste of resources.
 
You must log in or register to reply here.
Top Bottom