Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Using my own background image, need to remove huge blank space (buffer) at top.

Using my own background image, need to remove huge blank space (buffer) at top.

Locked

Views: 3,414

Results 1 to 7 of 7
This thread is locked. New replies are disabled.
13 Mar 2009, 8:02 PM
#1
monty_python avatar

monty_python

New Zenner

Join Date:
Aug 2008
Location:
LA
Posts:
36
Plugin Contributions:
0

Using my own background image, need to remove huge blank space (buffer) at top.

Hello guys and gals.

I'm customizing my ZenCart and have finally used my own background image. At the top of my store where the header/banner is, it is completely white (white is my background color) for a few hundred pixels... then my background image finally starts. Can someone tell me how to get rid of this white buffer area that is just above my background image? Thanks!

http://www.imagineloveandpeace.net/store/

13 Mar 2009, 8:53 PM
#2
brianmullaney avatar

brianmullaney

New Zenner

Join Date:
Mar 2009
Posts:
1
Plugin Contributions:
0

Re: Using my own background image, need to remove huge blank space (buffer) at top.

Monty - did you already fix it because I don't see any white space at the top

14 Mar 2009, 5:52 AM
#3
monty_python avatar

monty_python

New Zenner

Join Date:
Aug 2008
Location:
LA
Posts:
36
Plugin Contributions:
0

Re: Using my own background image, need to remove huge blank space (buffer) at top.

No, maybe I'm explaining it wrong. I tested it in another browser to make sure it's consistent as well. I'm in Firefox and in IE it actually starts at the top where it should be for almost a second until the rest of the page loads in and then it bumps down a few hundred pixels.

The upper left and upper right corners of my background image (which are pink-ish and feathered) should be at the top of the page.

14 Mar 2009, 6:06 AM
#4
haredo avatar

haredo

Totally Zenned

Join Date:
Apr 2006
Location:
Texas
Posts:
6,178
Plugin Contributions:
0

Re: Using my own background image, need to remove huge blank space (buffer) at top.

Mo,
Wow a cool show i used to watch as a child.. Monty Python

Here is the problem:
body {
background-color:#FFFFFF;
background-image:url(../images/store_bg.jpg);
background-position:center center;
background-repeat:no-repeat;
color:#000000;
font-family:verdana,arial,helvetica,sans-serif;
font-size:62.5%;
margin:0;

  1. the highlighted red font above you have added two center instead of one
  2. should be:
  3. background-position: center;
14 Mar 2009, 9:41 AM
#5
monty_python avatar

monty_python

New Zenner

Join Date:
Aug 2008
Location:
LA
Posts:
36
Plugin Contributions:
0

Re: Using my own background image, need to remove huge blank space (buffer) at top.

:clap:Gotta love Monty Python... and thanks for your attention too! :clap:

I should be changing the Style sheet in > Templates>Classic>Css right?

The css doc in there has it the way it should be... pasted from doc...

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #ffffff;
background-image: url(../images/store_bg.jpg);
background-position: center;
background-repeat: no-repeat;

Thanks for your time!
-Monty

14 Mar 2009, 3:05 PM
#6
haredo avatar

haredo

Totally Zenned

Join Date:
Apr 2006
Location:
Texas
Posts:
6,178
Plugin Contributions:
0

Re: Using my own background image, need to remove huge blank space (buffer) at top.

Mo,
Take background-position: center; completely out of the sheet please.

Classic

  1. Take time to read about the override system
  2. At the top of this page click on:
  3. Tutorials/FAQ
  4. search for override system
  5. After you do a little reading this is helpful also
  6. Click on the tab:
  7. Free Software add ons
  8. search for override system
  9. choose the one with the Chart
  10. download it, unzip her, and print her out
  11. You will love it
  12. Then we can play with the site and change the colors
8 Apr 2009, 6:55 AM
#7
monty_python avatar

monty_python

New Zenner

Join Date:
Aug 2008
Location:
LA
Posts:
36
Plugin Contributions:
0

Re: Using my own background image, need to remove huge blank space (buffer) at top.

Super late reply...

this eded up being the quick fix

background-position: top center;
background-repeat: repeat-y;

I do really appreciate your encouragement to learn the Override System, once i get this store up and running I will make time to learn the system more in depth.

Thanks again!
-Monty