PDA

Click to See Complete Forum and Search --> : Repeating image in a slice

LampArtPro
07-02-2008, 04:09 PM
I got a slice that is 900x9 pixels. And an image that is 1x9 pixels. And I want the image to repeat through the entire thing.

I was told to use CSS but all the codes I used didn't work, is there something I'm missing in my html to start using css?

<td width="953" height="9" colspan="50" bgcolor="#DBE3EA">
<img src="images/spacer.gif" width="953" height="9" alt=""><div style="background-image: url('shadow.jpg'); background-repeat: repeat-x; "></div></td>
LampArtPro
07-02-2008, 04:12 PM
Okay, well first off I fixed it some by removing "<img src="image/space.gif" width="953" height="9" alt="">"

But now it fails to repeat the entire length and doesn't even show up at all in firefox.
LampArtPro
07-02-2008, 04:17 PM
Here is the actual page I am working on, the area I'm dealing with is just under the blue bar. http://www.dotswoof.com/test/index.html
gabriele
07-02-2008, 04:18 PM
you first need to give dimensions to your div ..
so..

<div style="width:900px;height:9px;background-image: url('shadow.jpg'); background-repeat: repeat-x; ">

and also do add the relative path to the image 'shadow.jpg' like this
url('/<path>/shadow.jpg');
where <path> is the relative path from the root of the site to the image ..

edit
in your case (after seeing the website) that would be
/test/shadow.jpg
LampArtPro
07-02-2008, 04:23 PM
I did what you said, and updated on the link I posted, it still doesn't work
Mr. E. Cryptic
07-02-2008, 04:32 PM
http://www.dotswoof.com/test/shadow.jpg doesn't seem to exist. try re-uploading.
LampArtPro
07-02-2008, 04:35 PM
Oh its there, but to be safe I reuploaded it to the directory and the images folder
gabriele
07-02-2008, 04:51 PM
sorry the height should be 9 and not 0 as i put in my code ... please change it and try again ..

(sorry for the typo ..)

edited by WebJoel: I changed your post to show "9px". :)
Mr. E. Cryptic
07-02-2008, 04:51 PM
image no longer returning a 404 - one problem sorted.

2. how literally did you take gabriele's post? cause

<div style="width:954px; height:9px; background-image: url('shadow.jpg'); background-repeat: repeat-x;">

is working grand (width and height set for your design)

incidently, you should really have a doc type in your pages. about doctype for HTML (http://www.w3schools.com/tags/tag_DOCTYPE.asp) or XHTML (http://www.w3schools.com/xhtml/xhtml_dtd.asp)
LampArtPro
07-02-2008, 05:01 PM
OH YES!

It is working, thank you very much saviors from the heavens who smite the great problems in my html!

Seriously though, thanks a ton.
LampArtPro
07-06-2008, 06:45 PM
Hey, I think this code is causing my site to mess up on Internet Explorer, www.dotswoof.com/home.html

Any idea why it would add spacing on IE and not on FF
WebJoel
07-06-2008, 10:02 PM
<html>
<head>
<title>Dot Swoof: Updated Weekly</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="description" content="Comedic content ranging from video game humor to straight out absurdity. Featuring Noobesauce, where four gamers take on the game of Monopoly">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<center>
<body background="images/crosshatch.gif">
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Ultimate Site.psd) -->
<table width="973" height="1153" border="0" cellpadding="0" cellspacing="0" background="images/whitecrosshatch.jpg" id="Table_01"> You need a valid !doctype before "<html>", get rid of the "<center>" before "<body>", and only ONE "<body>" per page is permitted.

"center" is deprecated. State a width for the container, and have "margin:0 auto;" and that 'centers' the container.

Condense this:

<body background="images/crosshatch.gif">
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


to this:

<body style="background:#fff url(images/crosshatch.gif); margin:0;">

and you have said exactly the same thing, succinctly and correctly. :)