Changing background colours from hex code to image tile

[YZ250]

Hi guys,

I have installed zencart onto my existing site. The background colours on my site are images tiled "bg_yel.gif" and "bg_gy.gif"

How can I instruct my stylesheet to use these images as the background and not a hex code?

Or alternatively, is there a way I can use a program to tell me what the hex colours of these gifs are? They are block colours, not patterns.

Thanks in advance.

[kuroi]

Adding the following to the styles for the element whose background you want to set would do it

background-image: url(../images/bg_yel.gif)

To find out what color the images are you could use any graphics package that has a color picker, or the ColorZilla add-in to Firefox.

[YZ250]

Thanks very much, Ill give that a go!

[gjh42]

Note that you are not going to get alternating tiles of two different background images in one element, if that is what you had in mind (you didn't say exactly how they were used).
If you do want alternating "tiles", your best bet is to combint the two images into one bigger image, quartered with two squares one color and two squares the other. Then when that image tiles, you will get the alternating tile look.


OK, found your site and you are not wanting alternating tiles, but different colors on different elements. Nevermind :)

[YZ250]

Hey guys, what images folder should I put the background tile in? I tried it in the following images folder and it didnt work...

\includes\templates\template_default\images

this was in conjunction with the code Kuroi gave me which looks fine to me.

code: background-image: url(../images/bg_yel.gif)

Do the files for backgrounds have to be gifs or are jpgs fine too? I used jpg as I didnt think there would be a difference.

[gjh42]

You can use any kind of image for the background tile, but if you put in your stylesheet
background-image: url(../images/bg_yel.gif);
the image has to be a gif. If you want to use a jpeg, call it like
background-image: url(../images/bg_yel.jpg);

Which element did you add that background-image to?

The image file should go in the /images/ folder of your custom template, whatever its name is.
You need to add the background-image code to the stylesheet for your custom template, too.
What is your template's folder name?

[YZ250]

Hi all, I got it working now. If you check out www.sgtpepper.com.au and www.sgtpepper.com.au/store you will see that the backgrounds are now identical. Im quite stoked about this.

Not sure what I did wrong the first time.

Now I have another question re some buttons I want to add to my zencart. Ill post seperately for that, if you guys could help again it would be much appreciated.

[taxidev]

I made these changes but the image isn't going to the background. I put the same image to the body and to the mainwrapper, but nothing. Could this have something to do with GoDaddy also?

[taxidev]

Never mind - I have an eroneous underscore in my path - works fine now.