14 replies [Last post]
jjchica
Offline
newbie
Indiana
Last seen: 8 years 32 weeks ago
Indiana
Joined: 2006-03-20
Posts: 7
Points: 0

Hi!
I'm working on a site right now and would like to know if it's possible to start a repeating background image lower on the page. I have tried the background-position tag, but it seems to only move the background to the right and doesn't seem to affect the top. Here is the url:

http://americantablerestaurant.com/2006/

I want the background tiled image to be visible behind the top of the banner and logo.

If that's not possible, does anyone have any ideas for how I can achieve that same look a different way?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 20 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

How do you make a background repeat y start lower?

you do not need to use the background-position property it's better to use the shorthand 'background'.

You can place position offsets on this using px, ems, %, or keywords.

background: #fff url(image.gif) repeat-y right bottom;

background: #fff url(image.gif) repeat-y 0 100px;

background: #fff url(image.gif) repeat-y 0 10%;

The first value is the horizontal axis, the second is the vertical
(although this isn't essential it's better to keep to a convention on the order)

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 34 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

How do you make a background repeat y start lower?

You can't start a repeating background at some point and have it repeat from there - it repeats in both directions (on each axis).

It looks like you want a top margin on the container to allow the body background to show at the top.

Try this:

add

#wrapper {
    margin: 30px auto 0;
    }

#header div {
    margin-top: -25px;
    }

jjchica
Offline
newbie
Indiana
Last seen: 8 years 32 weeks ago
Indiana
Joined: 2006-03-20
Posts: 7
Points: 0

How do you make a background repeat y start lower?

wolfcry911 wrote:
You can't start a repeating background at some point and have it repeat from there - it repeats in both directions (on each axis).

It looks like you want a top margin on the container to allow the body background to show at the top.

Try this:

add

#wrapper {
    margin: 30px auto 0;
    }

#header div {
    margin-top: -25px;
    }

I tried this and posted the resulting page:

http://www.americantablerestaurant.com/2006/index2.html

On my computer I can see a bit of the background at the very top. However, the part behind where the transparent gif is still has the repeating background (not the tile--the repeat-y) showing behind it. Maybe this is just a browser issue? How does it look for you?

Thanks for the suggestion.

jjchica
Offline
newbie
Indiana
Last seen: 8 years 32 weeks ago
Indiana
Joined: 2006-03-20
Posts: 7
Points: 0

How do you make a background repeat y start lower?

Hugo wrote:
you do not need to use the background-position property it's better to use the shorthand 'background'.

You can place position offsets on this using px, ems, %, or keywords.

background: #fff url(image.gif) repeat-y right bottom;

background: #fff url(image.gif) repeat-y 0 100px;

background: #fff url(image.gif) repeat-y 0 10%;

The first value is the horizontal axis, the second is the vertical
(although this isn't essential it's better to keep to a convention on the order)

Hugo.

I tried this and the background isn't showing at all in my browser. See the following:

http://americantablerestaurant.com/2006/index3.html

Any ideas what's going on?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 34 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

How do you make a background repeat y start lower?

you didn't follow exactly what I showed you. You put the negative top margin on the #header. It should be on a new rule of #header div. You need to target the divs within the header.

jjchica
Offline
newbie
Indiana
Last seen: 8 years 32 weeks ago
Indiana
Joined: 2006-03-20
Posts: 7
Points: 0

How do you make a background repeat y start lower?

Ahhhhh. You rock! That fixed it...at least on my computer. Many thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 20 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

How do you make a background repeat y start lower?

[footnote] :oops: wolfie picked up my deliberate error there, of course you can't repeat a background from a shifted position

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jjchica
Offline
newbie
Indiana
Last seen: 8 years 32 weeks ago
Indiana
Joined: 2006-03-20
Posts: 7
Points: 0

How do you make a background repeat y start lower?

The fix worked fine in my browser and I used browser cam to check other browsers and it looked fine in all that I checked. However, my client called and said the top part of the page is cut off even though in browser cam it looked fine. Any ideas what is happening?

I moved the site to:

http://americantablerestaurant.com/

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 20 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

How do you make a background repeat y start lower?

It doesn't look fine, I would only trust to a rendering in a real browser I am assuming the problem your client saw was with IE , and that really should have been picked up on!

Try adding this to the ruleset for that header div:
#header div {margin-top: -25px;position:relative;}

IE is not happy rendering negatively positioned elements outside their parents, this brings the image to the forefront.

Hugo

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jjchica
Offline
newbie
Indiana
Last seen: 8 years 32 weeks ago
Indiana
Joined: 2006-03-20
Posts: 7
Points: 0

How do you make a background repeat y start lower?

Whoops. Yeah, you're right. I was looking at old captures from browser cam. That seems to have done the trick for the most part. Explorer 5.0, 5.5 and 6.0 on Windows 2000 still have the same problem, but IE 6.0 and 7.0 beta on XP look good. Do you know of a fix for Windows 2000?

jjchica
Offline
newbie
Indiana
Last seen: 8 years 32 weeks ago
Indiana
Joined: 2006-03-20
Posts: 7
Points: 0

How do you make a background repeat y start lower?

I just recaptured and the Windows 2000 shots are hit and miss. Some are fixed at the top and some aren't. I'm assuming they are all ok now but it just isn't showing through for some. Is that a safe assumption?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 20 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

How do you make a background repeat y start lower?

I see no reason why IE6 on Win XP or 2000 should be any different.

Generally I'm not aware of a concern that IE6 needs checking between these two OS.

I would tend to be worried by the phrase hit or miss as not being a reliable indication of whats true.

I think you should probably ignore this for the time being until it's mentioned as a real world problem.
As for earlier IE versions, 5+ is really a dead duck now which few are or should be using.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

briski
briski's picture
Offline
Elder
London
Last seen: 2 years 20 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

How do you make a background repeat y start lower?

Hugo wrote:
[footnote] :oops: wolfie picked up my deliberate error there, of course you can't repeat a background from a shifted position

That's not striclty true, you were right first time that you can repeat from a shifted position.

Not sure it's ever practivable but imagine you have a 100px high image with the following

background: url("pointlessimage.jpg") repeat-y 0 -50px;

It would repeat up and down as you say, but the verticle offset will effect how the image is cut off at the top and bottom of the container.

Like I say not sure I can think of a reason to actually do this but it is valid. Maybe usefull with some vertically centered thing prehaps?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 20 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

How do you make a background repeat y start lower?

Good point Briski, knew I wasn't entirely wrong Smile you would repeat that part of the image that you asked it to start from.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me