css and background image [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : css and background image

cheyana

01-23-2003, 03:07 PM

is it possible to have css load more than one image ? I have a basic css style sheet and an html index file that loads up a little back ground image with the rest of the sliced up image positioned and loaded by tables. I'd like to be able to have the css style do all the image loading so i don't need to repeat the html tables in every page that wants the whole image.

this is what it looks like:

HTML>
<HEAD>
<meta name="linked-style-sheet-name" value="Embedded style sheet">
<meta name="window-location" value="{ 25 25 550 854 }">
<meta name="targetted-browsers" value="NS4.0 NS6 IE4.0 IE5">
<TITLE> </TITLE>
<link rel="stylesheet" href="css.css" type="text/css">
</HEAD>
<BODY background="bg.jpg">


<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="780" HEIGHT="500">

<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="780" HEIGHT="100">
<IMG NAME="lost0" SRC="slice1.jpg" width="780" height="100" BORDER="0"></TD>
</TR>

... it continues to load a few more slices.

</TABLE>

.... the rest of html index

Can i somehow use background-image:url(http://blahblah/image.jpg) and have the css also load the slices ?

puzzled ... trying to learn css and html

LadyCrow

01-23-2003, 03:48 PM

can you give me the url
i am not quite understanding

lefty

01-23-2003, 04:22 PM

Are you looking to have two background images with css? I'm afraid that's not possible, if that's the case.

Alcy

01-23-2003, 05:29 PM

If you set those images as the background of each cell, it could be done in CSS (although you'd have to specify a size for each cell - ie. the size of the image):

<style type="text/css">

td.one
{
border:0px;
background-image:url("IMAGE.GIF");
width:780;
height:100;
}

td.two
{
border:0px;
background-image:url("IMAGE.GIF");
width:780;
height:100;
}

</style>

<table>

<tr>
<td class="one">.</td>
</tr>

<tr>
<td class="two">.</td>
</tr>

</table>

The name "one" and "two" can be changed to anything. You should probably stick a small character in each column (like a period), so that the background will be seen in netscape.

You'd still have to include the coding for the table in each page... not as much though ;).

Alcy

01-23-2003, 05:37 PM

Eesh... five minute editing rule :P.

If you don't put something in columns, it'll just show up blank on netscape.

Also, for your background image:
<style type="text/css">
body
{
background-image:url("BACKGROUND.GIF");
}

td.one
{
border:0px;
background-image:url("IMAGE.GIF");
width:780;
height:100;
}

td.two
{
border:0px;
background-image:url("IMAGE.GIF");
width:780;
height:100;
}

</style>

cheyana

01-23-2003, 09:26 PM

this is great! . .. ty so much for all the suggestions. Alcy, ... i think i understand what you say, i'll post back if it works or not.

if it works.. *crossing fingers* i'm hoping my web pages can have the same picture using a linked style sheet even if the viewed picture is a bunch of sliced picture pieces instead of a single jpg