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
Full Version: Background Image
Avactis Ecommerce Shopping Cart Software
Avactis Shopping Cart Forums > Avactis Technical Issues > Graphic Design Help, Ideas and Fun Cart Tweaks
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.
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.
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.
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?
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;
}
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.
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.
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.
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;
}
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!
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!
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!
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!
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!
No worries Don, any help is appreciated!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
