I need help and info about background pictures.

[cecepee]

Hello.

I need help and info about background pictures.
i have seen many stores that has BG pix on the sides and white BG or another color or BG picture in the middle.

When i try to fiddle with BG pix or color i get either no result at all, or it will show all over the screen, even in the middle part.

How/what shall i do to get either a BG picture or a BG color on the sides, but not in the middle. or even how to get a different BG picture in the middle.

This is probably pretty basic knowledge for web designers, but i haven't done this for years now and feel like a novice.

All help and input is most appreciated.

Best regards
Peter

[hieloiceberg]

You will need to create a back ground image with 3 area's left, center and right. now the center area shoulbe your store width or maybe wider and if you choose to make it gif or png you can leave it transparent or choose any color that you want and what ever is left on the sides left and right you can add a diferent color, the full image can be probably like 2000px so it will adjust to a wide resolution on clients computer and edit global.css file from the theme you are using.

body {
   background-color: black;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #bbb;
   text-align:center;   
   background-image: url(../img/bg_image_1px.gif);   <<--------
   background-position: top;    <<--------
   background-repeat: repeat-y    <<--------
}

here are some images samples

BackGroundImages.zip

[hieloiceberg]

The easiest way to do it is open ur global.css file and change colors on the body and the #page by default prestashop theme uses white on body bg and none on the #page so you can add an extra color to it

[cecepee]

Thank you for your reply and the sample files.
I will try it out tomorrow after work, and i will then get back to you here with result.

Thanks again, most appreciated,

Peter

[cecepee]

Hello again

Well, i have now tried the code as i was given in the example above, and i used one of the example pix provided as well, and it works fine without any errors.
That is good, and i feel now that im starting to get the hang of it, and i feel more confident about changing my themes design.
Now i just need to get my preferred colors in order, its not easy to come up with a good color combination that works good together, that is nice to look at and also work together with your products and business profile.

If im not wrong i believe i have seen a website that lists and shows optimal color combination's,
If anyone know wich one im talking about,please provide the link.

Again, thanks for your help

//Peter

[hieloiceberg]

http://www.2createawebsite.com/build/hex-colors.html

[SonnyCooL]

can i share ? pls ....
i doing the same thing, add code in global css and upload the pictures but it look funny on my site, cause the background picture only appear in the middle .....

can anyone help ?
here my url http://store.modify.my
Thanks

edit : wrong url

[SonnyCooL]

can i share ? pls ....
i doing the same thing, add code in global css and upload the pictures but it look funny on my site, cause the background picture only appear in the middle .....

can anyone help ?
here my url http://store.modify.my
Thanks

edit : wrong url

Solve .....

[VIXUS]

You will need to create a back ground image with 3 area's left, center and right. now the center area shoulbe your store width or maybe wider and if you choose to make it gif or png you can leave it transparent or choose any color that you want and what ever is left on the sides left and right you can add a diferent color, the full image can be probably like 2000px so it will adjust to a wide resolution on clients computer and edit global.css file from the theme you are using.

body {
   background-color: black;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #bbb;
   text-align:center;   
   background-image: url(../img/bg_image_1px.gif);   <<--------
   background-position: top;    <<--------
   background-repeat: repeat-y    <<--------
}

here are some images samples

excellent tips mate. verry helpfull!

http://www.vixus.hr/shop2/new-products.php

gg!