Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / How do I get static b/g with images?

How do I get static b/g with images?

Locked

Views: 1,124

Results 1 to 8 of 8
This thread is locked. New replies are disabled.
30 Dec 2008, 5:38 PM
#1
davidandrews avatar

davidandrews

Zen Follower

Join Date:
Apr 2006
Posts:
108
Plugin Contributions:
0

How do I get static b/g with images?

HI There
I would love a background like this:

https://www.dvdworldusa.com

with images left and right

How do I :

  1. get the stylsheet code right?
    and
  2. prepare the image so the sizing is correct!

My current stylesheet for my (different) fixed background isthis:

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #077090;
background-color: #transparent;
background-image: url(../images/tileback.jpg);
background-repeat: repeat-x;
background-attachment: fixed;}
}

Thanks for any help/suggestions!

30 Dec 2008, 5:57 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: How do I get static b/g with images?

Usually that kind of thing is done with one big image as the body background with the faces on each side, and a transparent area the same width as your mainWrapper in between.

30 Dec 2008, 5:58 PM
#3
davidandrews avatar

davidandrews

Zen Follower

Join Date:
Apr 2006
Posts:
108
Plugin Contributions:
0

Re: How do I get static b/g with images?

think I am part way there:

I viewed source and think this is it:

background: black url(images/graphics/homepagesleeves/promo_background.jpg) fixed top center no-repeat;

How woudl I integrate with my existing code?

Thanks!

30 Dec 2008, 6:14 PM
#4
fourbit avatar

fourbit

Zen Follower

Join Date:
Sep 2004
Location:
MONTANA!!!
Posts:
97
Plugin Contributions:
0

Re: How do I get static b/g with images?

Put this in your css stylesheet for your template.

background:black url(images/graphics/homepagesleeves/promo_background.jpg) no-repeat fixed center top;

That should do it. Give us a url for your site. Would like to see it.

LOL. I should have refreshed before I finished that reply. ;) Looks like you got it.

30 Dec 2008, 6:32 PM
#5
davidandrews avatar

davidandrews

Zen Follower

Join Date:
Apr 2006
Posts:
108
Plugin Contributions:
0

Re: How do I get static b/g with images?

Just as I thought! Many Thanks
Site still in progress (testing) maybe one day, I will finally get there.
have used the thing as a long learning curve...

Thanks loads for the help

Any special rules on the image i use in terms of dimensions etc?

30 Dec 2008, 6:50 PM
#6
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How do I get static b/g with images?

Nope. Background-images are what size they are, and (if smaller than the container) will repeat automatically to cover the whole container unless you specify repeat-x, repeat-y or no-repeat. They start at the top left corner unless you tell them to position elsewhere.

The smaller the image file, the faster the bg will load; if a repeating image can do what you want, it is better than one big image.

30 Dec 2008, 6:58 PM
#7
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How do I get static b/g with images?

Note: it is recommended to save template images in your custom template folder instead of the main product images folder. So the property would look like this:

background:black url(../images/promo_background.jpg) no-repeat fixed center top;

and you would save it as

/includes/templates/your_template/images/promo_background.jpg.

31 Dec 2008, 6:45 AM
#8
davidandrews avatar

davidandrews

Zen Follower

Join Date:
Apr 2006
Posts:
108
Plugin Contributions:
0

Re: How do I get static b/g with images?

High Paul and Glenn
THanks LOADS for your help, it is as I figured but thanks for confirming
Hope this thread proves useful to others needing a similar effect