Quick Query to Web Developers

Completely Clueless · 03-31-2010, 07:29 AM

Hi guys,

A quick question:

What is the code snippet required to get an image to repeat vertically up a page? I can only find info relating to repeating *background* images in my search attempts, and this is just a regular image file which I want to repeat over the pre-existing page background. I'd like it to repeat all the way up the extreme left hand edge of the page. Say the image is called abd.jpg and is in the same folder as the index.html.

Many thanks,

CC.

grail · 03-31-2010, 09:04 AM

I think the background idea is the way it is handled. ie you tell your css to handle the image as part
of covering a particular side of the page and then to repeat-y to get it to replicate. (so the snipets you have seen are correct)

Completely Clueless · 03-31-2010, 11:15 AM

Quote:

Originally Posted by grail

I think the background idea is the way it is handled. ie you tell your css to handle the image as part
of covering a particular side of the page and then to repeat-y to get it to replicate. (so the snipets you have seen are correct)

Well you may be right, but I can't get it to work. Probably something else I'm doing wrong.
I have taken the image and done the same thing in Photoshop now. It will take a little longer to load the page unless the viewer is on dialup or something, but anyone still using that doesn't deserve to view anything, anyway.

So I shall be marking this one down as "UNSOLVED" - Well, I would if I could find it in the thread tools. ;-)

Completely Clueless · 03-31-2010, 12:18 PM

[QUOTE=grail;3919190]I th

graemef · 03-31-2010, 08:22 PM

What exactly did you try to get this as unsolved?

Here is an untested idea:

Place a div in the location that you want. In that div set the style to a CSS style that has a repeating image background. Does that get close to what you are trying to do?

grail · 03-31-2010, 09:02 PM

Firstly try graemef's suggestion, but second, maybe you could show us your snippet and we can see where you are going wrong?

graemef · 03-31-2010, 09:15 PM

Quote:

Originally Posted by Completely Clueless

It will take a little longer to load the page unless the viewer is on dialup or something, but anyone still using that doesn't deserve to view anything, anyway.

Not everyone in the world has a choice. Before moving to Vietnam I was living in Papua New Guinea, a slow expensive connection was all that was on offer.

What I would suggest (if you haven't already done this) is that you look at trying to reduce the size of the image. Usually that can be done without significant sacrifice to the quality, remember you don't need to have print quality images on a web page.

grail · 04-01-2010, 08:16 AM

Ok... so I did a little more poking and this worked for my test picture:

css file

Code:

body{
    background-image: url('spawn_angel.jpg'),url('spawn_angel.jpg');
    background-repeat: repeat-y;
    background-position: right top, left top;
}

Completely Clueless · 04-04-2010, 06:56 AM

Okay, thanks for your input, grail and graemef.

The image I created with Photoshop does load a little slowly even with broadband, so if time permits I may try your suggested solutions. It's not a good position to be in at the moment for me, though, since it's Easter and I'm in the middle of moving house. Nevertheless, I shall try to give it another go as soon as time permits.

One other point. I got this template for 60 bux over the web and I can't parse it through the W3com compliance tester since it(the sixty dollar template) doesn't have a charset declaration specified in its header. So I am getting some spurious characters rendering in different browsers. Yeah, call me a cheapskate. Anyway, the guy who wrote the 'plate has since gone bust, but from what I can gather he was American. Now, would anyone care to speculate on what the most likely charset for this template would be? I need to stick something in the head section and guess maybe one of the 3 most popular US charsets might yield some improvement in page rendering.
By now you will have gathered I ain't no professional web developer. Please clue me up. :-)

graemef · 04-04-2010, 08:42 AM

Without seeing the template it's difficult to know the charset used.Obviously it would be great if it was UTF-8 but if I had to take a guess I'd go for a Windows specific one: Windows-1252.

As for your image what format have you saved it as, the format is normally given by the file extension?

graemef · 04-04-2010, 09:28 AM

You might find the following link helpful Character Sets

Completely Clueless · 04-05-2010, 05:05 AM

Quote:

Originally Posted by graemef

Without seeing the template it's difficult to know the charset used.Obviously it would be great if it was UTF-8 but if I had to take a guess I'd go for a Windows specific one: Windows-1252.

As for your image what format have you saved it as, the format is normally given by the file extension?

Thanks for the charset steers. As for the format, the image is a jpg.
I know this is not the most efficient encoding, but it is a photo of a sliver of a gold coin and gold is a tricky 'colour' to reproduce in the leaner and meaner formats.

Sergei Steshenko · 04-05-2010, 06:06 AM

Quote:

Originally Posted by Completely Clueless

...
gold is a tricky 'colour' to reproduce in the leaner and meaner formats.

Could you please elaborate ?

graemef · 04-05-2010, 10:16 PM

I don't think that it is gold as such that is the problem but that you are dealing with a photograph and so many different colours are used to make the coin look "real". For photos, jpg is a reasonable format to use, however jpg does have different levels of compression. You may want to play around with that, increasing the compression level and seeing what it looks like. You want to avoid the fuzzy appearance that too much compression will generate but often you can do quite well.

Some further thoughts what is the dimensions of the image and what is your current file size?

Completely Clueless · 04-13-2010, 10:31 AM

Quote:

Originally Posted by graemef

what is the dimensions of the image and what is your current file size?

Thanks, guys,

Linear dimensions for this repeatable image element are approximately 5mm height and 35mm width. The file size for each of these segments is 14kB in .jpg, down from 195kB .raw with no serious diminution in quality thanks to GIMP's re-rendering engine.