background image

Forum Moderators: open

Message Too Old, No Replies

background image

how do i create a background image?

souleye

11:33 pm on May 12, 2002 (gmt 0)

need help with creating a image background and put text on top. i know this may seem simple but i have the html reference but still clueless. thanks
souleye

Morrison

11:34 pm on May 12, 2002 (gmt 0)

u can use the css "z-index" to control the layers in your document.

Morrison.

papabaer

11:42 pm on May 12, 2002 (gmt 0)

Using CSS it is easy to apply background-images to your <body> content as well as individual <div>'s headings, lists and other elements.

For example:

body {
background:#fff url(images/bk_image1.gif) fixed bottom-left no-repeat;
}

The above will display an image in the left hand bottom of the page display. The image will remain fixed, and will NOT scroll with the normal body content. (Not supported by NN4).

The following creates a class for un-ordered lists that also contains a background-image:

ul.f {
margin-left:20px;
border:1px solid black;
background-image: url(assets/bk_fc0456.jpg)
}

And here is an example for displaying a heading <h1> with a background-image:

h1 {
font:22px #c00;
background:#ffc url(assets/bk_fc0456.jpg);
padding:3px 3px 3px 15px;
border:solid black;
}

Best of luck!
- papabaer

(edited by: papabaer at 11:54 pm (utc) on May 12, 2002)

Morrison

11:44 pm on May 12, 2002 (gmt 0)

You also have the css "background-image" the goes like this:


style="background-image : url(pics/else/atom.jpg);"

Morrison.

papabaer

12:01 am on May 13, 2002 (gmt 0)

Use can use the CSS Shorthand property background in place of the longer background-image

div.one {
background-image:url(images/mypic.jpg);
}

Can also be written as:

div.one {
background:url(images/mypic.jpg);
}

If you assign a color to the font contained within the style declaration for a given element, id or class, you need to include a background-color for CSS validation.

So you might have a <div> class written as such:

div.shoutouts {
width:300px;
height:auto;
background:#fc0 url(assets/angry-man.gif) fixed top-right no-repeat;
color:#600;
border:3px solid red;
}