Jump to content


Photo

Background Image


  • Please log in to reply
6 replies to this topic

#1 benz

benz

    Newbie

  • Members
  • Pip
  • 6 posts

Posted 24 October 2010 - 01:38 PM

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

#2 DonH

DonH

    Overlord

  • Members
  • PipPipPipPipPipPipPip
  • 1,019 posts

Posted 24 October 2010 - 03: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.

#3 benz

benz

    Newbie

  • Members
  • Pip
  • 6 posts

Posted 24 October 2010 - 04:36 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?

#4 Technology Ideas

Technology Ideas

    Expert

  • Members
  • PipPipPipPipPip
  • 397 posts

Posted 24 October 2010 - 08:26 PM

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.

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.

#5 benz

benz

    Newbie

  • Members
  • Pip
  • 6 posts

Posted 25 October 2010 - 06:03 AM

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.

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!

#6 DonH

DonH

    Overlord

  • Members
  • PipPipPipPipPipPipPip
  • 1,019 posts

Posted 25 October 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:

#7 benz

benz

    Newbie

  • Members
  • Pip
  • 6 posts

Posted 25 October 2010 - 12:57 PM

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:



No worries Don, any help is appreciated! :)