Pages:

Background image

Homer

No avatar

2006-04-21 12:27

How do you insert a background image. is it in the .CSS or is it alot more work than i think. i looked on the forum for answeres but nothing. just trying to brighten up the site as it just white.

12345

No avatar

2006-04-21 13:03

bacground image for all shop or for menu categories? (left side)? menu content(cart, conctact, searchengine)? Background for right content of shop (where are products) ?
And for what version of QC?
Basically in version 1.2 QC all bacground images are in CSS file named default.css
ex.:
body{padding:0px 0;font-family:Verdana, Helvetica, sans-serif;font-size:10px;text-align:center;background:#248399;color:#000; background: url("images/pasek.gif") ;}

<-- bacground with web color + graphic bacground. You will see only background: url("images/pasek.gif") if set. You need set own path for graphic files. This is ideal for pattern but you can of course set a BIG file.
Just try:)

Homer

No avatar

2006-04-23 00:53

Hiya i just want to put a back ground image site not on the products or banner area but like behind the shopping list and basket.


www.nlsystems.co.uk/Portugalia/

Homer

No avatar

2006-04-23 00:55

oh also im using QC 1.2 thanks

Homer

No avatar

2006-04-23 01:06

i just tried it. its the wrong place i want it to appare beind the writing in home, Basket, About us, Contact and products so the site dont look boring.thanks

12345

No avatar

2006-04-23 03:24

Find line in CSS file , FIRST line witch #navi like this (Your can be bit different)

#navi{background-color:white;margin:0 19px 2px 19px;background:url("images/navi.gif");border-top:0px solid black;border-bottom:0px solid black;border-right:0px solid black;}

You dont need copy all line, just put in Yours CSS in correct line this code:
;background:url("images/navi.gif")

12345

No avatar

2006-04-23 03:25

aha, of course you need to create image and put theimage to folder templates/your image folder/your graphic file

background:url("templates/your image folder/your graphic file:);

Homer

No avatar

2006-04-23 12:38

hiya it work but its in the wrong palce lol where would i stick that code to be behind the writing on home, not in the navigation bar. thanks

12345

No avatar

2006-04-23 23:17

ehm, take screenshot, make red border on object where You want to change background in any graphic program and post it.

Homer

No avatar

2006-04-24 00:14

ok pasted the link to the picture that i want the picture to be in.

12345

No avatar

2006-04-24 13:29

ok, here we have:
find this code in default.css (or you main teplate css file)
#main{position:relative;float:left; margin-left:30px;padding-left:0px; width:500px;margin:10px 0px 10px 30px;}
* html #main {margin:10px 0px 10px 30px;}

note, that is just MY css. Your data content should be bit different.
Mainly, just put on the end of #main ,after
margin: 10px .... ; background-color:"blue";}
or if You want graphic patter or image ,put
background:url("templates/your image folder/your graphic file:); after margin or background-color

Homer

No avatar

2006-04-24 15:08

hiya thanks a bunch .just the image is sooooo off it setes everything off center. what size should the picture be to fit or is that in the css file that i meant to set it to.

Homer

No avatar

2006-04-24 15:13

#content{background:url(img/container_bg.gif) 195px repeat-y;float:left;padding:0 20px}

#main{position:relative;float:left; margin-left:30px;padding-left:0px; width:500px;}

#menu{position:relative;float:left;width:165px;padding:0;margin:0;}
* html #menu{position:static;}

this is what i have

Homer

No avatar

2006-04-24 15:14

#main{position:relative;float:left; margin-left:200px;padding-left:0px; width:500px;background:url("img/grapes2.JPG");

when i modifi it to this it sends it all off scale

12345

No avatar

2006-04-24 17:33

give width and height to image

("img/grapes2.JPG") width:"450px" height:"500px";

its example !

12345

No avatar

2006-04-24 17:56

margin-left:200px; ????????? all site has 740px..why margin left 200px??????

Homer

No avatar

2006-04-24 18:03

Width = 400 pix
Height = 525 pix

thats the size of the picture

Homer

No avatar

2006-04-24 18:06

the reason i left margin cos the image on the site shoots down to the bottom including the writing and also the icon images on the prodcts disappare

wizzud

No avatar

2006-04-25 10:43

In your ORIGINAL css file, just add the line ...

#main { background: transparent url(img/yourimage.jpg) repeat-y 50% 0; }

This places a background image (yourimage.jpg), horizontally centred, at the top of the DIV with id=main, and repeats it going down the page. If you need to adjust the width (or height) of your image, do it in a graphics package and re-save the image. If your image has a coloured background and you want to ensure no white space around the borders of your image, change 'transparent' to match the background colour of your image so that it blends in (eg. #FFFFFF or #000000 or #0000FF, whatever!). If you have a little image (like a pattern) that you want throughout the div, change 'repeat-y 50% 0' to just 'repeat'.

Avoid background mages with transparency in them unless you want to muck about with filters.
No background image will affect the placement of anything else on the site.
Be careful with certain browsers (eg. Opera) that require cascading of height and/or width properties in order to be able to correctly position (ie. center) a background image.

~12345

No avatar

2006-04-25 10:49

great, wizzzud. :)

Pages:
Back to top
about us | contact