Right-aligned background issue

HTML & CSS
1

Hola everyone!

Here’s the new issue…I have a tiling background assigned to the right side of the BODY element. It’s very tall (1228px) and set to repeat-y as follows:


body {
	background: url('../images/border.jpg') right top repeat-y;
}

I want the graphic to stay on the the right window edge, unless the window drops below 1050px. Then I want it to stick at 1050px on the right edge and stay there, forcing scroll bars, and keeping the image stuck at that width.

Well…here’s what I’ve tried that doesn’t work:


body {
	min-width: 1050px;
	background: url('../images/border.jpg') right top repeat-y;
}

min-width forces the scrollbars, but the graphic remains fixed to the right now matter how small. Can I get the graphic stick at 1050px or greater?

For an example of this on a live site (not working mind you…it sticks to the right regardless of size), take a look here.

I have tried a wrapper with a fixed width, and then attaching the background. This worked, but clipped the graphic to the height of the wrapper, which fails whenever the page is really short (it’ll only go down as far as the wrapper which is unacceptable…). I’d be open to a 100% height solution with a wrapper if it exists.

2

No body? Wow. Maybe it’s just not possible. Any suggestions?

3

Ok…I surrender. Given few options, I’m planning on going back to using a wrapper like this:


#wrapper {
    min-height: 1000px;  // hoping this is far enough down that most users wont notice/need it
    min-width: 1050px;
    background: url('../images/border.jpg') fixed right top repeat-y;
}

Unless someone has a better idea. Thanks anyways.

4

Hi, i’m not sure if i understand what you’re trying to do: you want the image stay put on the right side when resizing the view port to a smaller resolution and still have it tiled down regardless the content?

Try wrapping everything in an inner wrapper with the background image set on that instead of the body. That gives me in FF the result that the image is staying at the right side, regardless viewport size and regardless content it is tiled to the bottom…

5

Thanks for the suggestion…and yes, that mostly works.

Where I’m getting stuck, is that the image will only go down as far as the wrapper. On a short page, the image gets clipped where the wrapper ends.

This site’s look requires the image to go all the way down, even on a page with little content.

So can the wrapper be forced to extend to the bottom of a page automatically?

6

Well you could set a min-height on the wrapper that is the full height of hte image.

Say the image is 1100px tall. Set a min-height:1100px.

Though that will force scrollbars for small resolutions. If you dearly requre the image to be shown then go for it:)

7

Ah, you want the image stretched down passed the content? Because when i tested it i removed almost all of your p’s and it still went to the bottom…

8

So no way to get it working on the BODY tag? I couldn’t find a way either. I can get the BODY to stay at a fixed size, but I can’t get the image to stay against the generated edge…instead, it clings to the right side of the viewport.

Looks like my best option is applying it to a #wrapper div with min-width: 1050px; and then forcing the div to be large enough for typical resolutions to fake full screen. That was what I settled on too.

Any way to get the #wrapper to be set to 100% height of the viewport? I know height: 100% doesn’t work like that…or it didn’t when I tried it.

9

Well, right now, the background is attached to the BODY tag and should run all the way down. If I reverse it, and put the image on the #wrap DIV, then it will only go down a bit…here’s a page that shows it looking “less good” :slight_smile: when the back is attached to #wrap.
example

10

Ok…and I set that link above with the Background on the #wrap tag.

Here, the horizontal scrolling works like I want, but the background clips to the size of the #wrap. Can the wrap be forced to auto-fit the height of the window?

11

You could set a min-height:100% on the wrap element.

Then set html,body{height:100%;}

That will make the #wrap element at the minimum 100% height :slight_smile:

12

Have you tried my suggestion? Because that doesn’t give any clipping, tiles all the way down the viewport and it keeps the image to the right no matter the screen size

13

That did it! Ryan, you’re my hero yet again!

Now how’s this going to fare in IE6/IE7? I haven’t started that debugging for IE phase yet, so advanced warning would be appreciated.

Thanks for the help guys!

14

And Luki_be…maybe I didn’t understand your suggestion before, but when I tried that, the “inner wrapper” was shrink-wrapping the content…collapsing on the content. I may not have understood an element of your suggestion though.

The link has Ryan’s suggested fix in place now.

15

IE6 will have a problem with it. It doesn’t support min-height. However giving it the height property will do the same thing :slight_smile:
Just do something like this

* html #wrap{height:100%;}

When/if you want help for IE6/7 problems just shout/create a thread and I’ll be there.

16

That produces the same result i had locally in FF, except Ryans’ solution doesn’t need an extra element. Did you add something to the innerwrapper?

17

Luki perhaps posting hte full code you worked with would help :slight_smile:

My solution seems the most optimal though.

18

I did this per Ryan’s suggestion:

html, body {
height: 100%;
}
#wrap {
min-height: 100%;
min-width: 1050px;
background: url(‘…/images/border.jpg’) right top repeat-y;
}

  • html #wrap {
    height: 100%; /* to fix IE6 lack of support for min-height */
    }
19

Looks good :tup:

Finish up your design in FF/good browsers then tackle IE. If you have problems with that just shout :).

20

I’ll definitely be back when I get stuck on IE. Thanks again guys!