Help - Search - Members - Calendar
Full Version: Background Image
Avactis Shopping Cart Forums > Avactis Technical Issues > Graphic Design Help, Ideas and Fun Cart Tweaks
benz
Hi All,

My first post so please be gentle!

I would like to include a background image on my storefront that extends outside the main container and fades to the background colour. I have specified this in my css but it still does not seem to work:


body {
width: 1014px;
min-width: 978px;
min-height: 100%;
background: black;
background-image: url(images/bgtexture.gif) repeat-x;;
color: #black;
font-family: Verdana, Sans-serif;
font-size: 9pt;
margin: 0px auto;
padding: 0px;

Any help greatly appreciated!

Many Thanks,

Ben
DonH
I see two problems. First background: black; should be background-color: black;. Second, you have two semi-colons after repeat-x.
I have had issues with using both a background image and color in the outer wrapper. I'm sorry, I can't remember what caused the issues or how I dealt with them.
benz
QUOTE (DonH @ Oct 24 2010, 04:10 PM) *
I see two problems. First background: black; should be background-color: black;. Second, you have two semi-colons after repeat-x.
I have had issues with using both a background image and color in the outer wrapper. I'm sorry, I can't remember what caused the issues or how I dealt with them.



Hi Don, thanks for your reply, however I have amended both these mistakes and still no luck! Anyone else have any ideas how to do this?
Technology Ideas
QUOTE (benz @ Oct 25 2010, 11:36 AM) *
Hi Don, thanks for your reply, however I have amended both these mistakes and still no luck! Anyone else have any ideas how to do this?


I hate to say but DonH's reply was incorrect. You need to do the following and add all into a single line and only use background as it is BODY CSS. You also didn't have the path to your background image set correctly either. Also note that you had #black as you color statement which is also incorrect. I corrected it below as well.

Your full body code using the other definitions as you had them should now be.

CODE
body {
width: 1014px;
min-width: 978px;
min-height: 100%;
background: #000 url(../images/bgtexture.gif) repeat-x;
color: #000;
font-family: Verdana, Sans-serif;
font-size: 9pt;
margin: 0px auto;
padding: 0px;
}


Then, as usual, clear the cache (select Admin Menu then Clear Cache under Tools) and then refresh your web page by pressing CTRL and F5 together.
benz
QUOTE (Technology Ideas @ Oct 24 2010, 09:26 PM) *
I hate to say but DonH's reply was incorrect. You need to do the following and add all into a single line and only use background as it is BODY CSS. You also didn't have the path to your background image set correctly either. Also note that you had #black as you color statement which is also incorrect. I corrected it below as well.

Your full body code using the other definitions as you had them should now be.

CODE
body {
width: 1014px;
min-width: 978px;
min-height: 100%;
background: #000 url(../images/bgtexture.gif) repeat-x;
color: #000;
font-family: Verdana, Sans-serif;
font-size: 9pt;
margin: 0px auto;
padding: 0px;
}


Then, as usual, clear the cache (select Admin Menu then Clear Cache under Tools) and then refresh your web page by pressing CTRL and F5 together.


Thanks Andrew, thats awesome! Works a charm, thanks for your help!
DonH
That's right! You put color, image, repeat, etc. all on the background or nothing shows. I knew there was something that I was forgetting.

In my haste, I looked at one of my sites. I only have a background color set, no image. I set the body background-color to #BCDAA3 which gives a fluid light green around the outside. I then set .page_bacground borders to a darker green for a shadow effect. I try to keep the use of graphics for structural design to the barest minimum.

Sorry for leading you astray! unsure.gif
benz
QUOTE (DonH @ Oct 25 2010, 11:32 AM) *
That's right! You put color, image, repeat, etc. all on the background or nothing shows. I knew there was something that I was forgetting.

In my haste, I looked at one of my sites. I only have a background color set, no image. I set the body background-color to #BCDAA3 which gives a fluid light green around the outside. I then set .page_bacground borders to a darker green for a shadow effect. I try to keep the use of graphics for structural design to the barest minimum.

Sorry for leading you astray! unsure.gif



No worries Don, any help is appreciated! smile.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Copyright © 2004-2006 Avactis Ecommerce Shopping Cart Software. All Rights Reserved.
Invision Power Board © 2001-2013 Invision Power Services, Inc.