Vertical gradient body background glitch - ideas?

Hey everyone. I encounted one hell of an odd issue today.

I caught this issue by chance and wonder if anyone knows how to correct it.

I am using a background image on the body tag - the image is a gradient that has a set width, and then repeats y down the page as needed.

However if the viewer has a smaller view window, the gradient image is shrunk. So instead of using the width the image actually IS (in this case 1225px), it adjusts to the size of the window, mucking up my layout.

Here's some screenshots:

www.julieruffell.com/gradient1.jpg (how it SHOULD look)
www.julieruffell.com/gradient2.jpg (how it looks when the window is shrunk)

The only way I can think to fix this issue is to move the image into the div box setting the size of the site (since it sets a width value), however, the background will only appear there if I set a height value (I also don't like the look as it adds space at the top), but I use the layout on many different sized pages, and want to be able to add text without having to resize the background every time.

I have tried using a height of 100% - no background image when used in the wrapper.

Does anyone know how to make the browsers leave the image at it's correct size, or how to put a background image into a DIV that repeats as long as there is content, withOUT a height value (if I HAVE to do that)?

This is only an issue because the background image is a gradient. Any other image - no problem. Bizarre!

 

The image likely is not shrinking - it's positioning is simply changing.

Though to tell what's going on we'd probably need to see the actual site and it's code (as in ALL of it)... for the most part what you said doesn't make a whole lot of sense.

 

Here - I tossed up a test version to show you the issue:

julieruffell.com/test.html

(the white coloured boxes are removed images - I have some privacy I have to follow right now at this stage).

I reduced the size of the grey box so you can see the issue (the actual side image is full screen).

The issue sometimes happens on IE (I'm using 8), but always occurs on the other broswers (though I had a friend look at it on Safari, and it happened for her only sometimes, but all the time on Firefox).

All the code is on this page (view source), including the CSS so you can see it (some code is there for parts I have removed, so if you don't see the DIV in the body, it's a removed section which has no affect on the issue - it happens with or without the removed section).

I'd appreciate any thoughts on this. My friend really would like to see the site up by Feb, and this is the only remaining glitch!

 

IE has a rather strange way of doing things in css

 

IE behaves better than the rest in regards to this issue. IE only does it sometimes - the rest all the time. This is not single browser issue.

To be honest though, I prefer IE. I have far less issues with IE as a whole than the others, and I'm usually scrambling to find a method to make something work in the others. Though I do see the others allow a lot more unique things (like a gradient without an image).

I miss the days of single broswers and sites being easy to build. *sigh*

 

I could not replicate any problems in FF, Opera or Chrome for linux. I think deathshadow has it right.

However the background image is attached to the right of the body. As the right side of the browser moves in, the background image moves as well. Which I would expect.

Try

body {
background: #000 url(newline.jpg) 0 0 repeat-y;
}

Code (markup):

I'm not sure why the original code says "center" because I'm seeing it to the right. So where do you want the white part? If you set it starting at the 0 coord of "left" it should always start at the left side instead of the middle or the right or whatever.

 

The white part is fine. Everything is exactly where it should be. The only issue is when the broswer window is reduced in size (ex: You make it half the size of a reg screen), the gradient shifts and messes up my look - those coloured boxes are images with a matching gradient background - and if it shifts, they look horrible. Also, the white text can fall into the white and can't be seen.

Your code makes the gradient start at the top left. I need it to be centered. The gradient is centered on all browsers and mutli computers I have tested it on. I'm not sure what you're seeing on the right besides the grey box (which should be on the right).

 

When I look at the gradient, it's black on the left and white/grey on the right. In my browser, the text.html page has the right side of the page white and the left side dark/black. Nothing looks "centered", it looks like a left-to-right gradient... is it supposed to go back to black as you go further to the right?? with the whitest part in the middle??

I'll look again at your page, maybe make a copy so I can really play around with the background, but I might be missing what exactly you want it to look like. My screen's 1440px wide. I should be able to see the whole bg image in its entirety, right?

*edit the page is gone, did you get it the way you wanted? If not, just post the code of it here.

 

I got it - mostly. So, yes, I took the page down (the site isn't live yet, for obvious reasons).

The overall body is black. There's a gradient that goes from dark grey to white. The gradient is 1225px. Where there is no gradient, there is black.

The code that is working for the most part is:

html{
background: #000000;  
}

body {
position:absolute;
margin:0;
width:100%;
height:100%;
background:url(http://www.adriennewilkinson.com/menu/images/line.jpg) repeat-y center;
min-width: 1225px;
}

Code (markup):

The issue with THIS code is that I MUST have the height value set to see the gradient. Sadly, when it's set at 100% - it cuts off the gradient at 100% - which doesn't help me for the pages that are longer than that.

 

And "auto" doesn't work for height - same prob - the gradient can't be seen at all.

 

Stomme poes - what browser are you using? I see you're in the Netherlands. I wouldn't think that matters, but my friend in Germany is telling me they are having odd issues in IE7 (I know IE6 has issues, but I've said "Forget it" to IE6), but Canadian/USA friends are not having issues.... :S

 

Tested FF, Opera, Konq en Chrome op Linux:
http://stommepoes.nl/Tests/backgroundimg.html

*edit tested on IE6/Tredosoft, IE7, Safari3-4-win, K-Meleon (FF2) on WinXP

Seems ok. But maybe still not what you mean?

I set the width to wrapper to the same as the image but that can be smaller.

 

That is working fine. The main issue with my page, is there's several parts to it, and everything has absolute positioning - which seems to be the route cause of the issues, but isn't something I can remove (floats aren't working at all to put things where I need them. I also don't want items to wrap - I need them to overlap).

 

Well there's your problem...

Jokes aside, do you have a copy live? If you've resorted to absolute positioning on 'everything' you've likely overcomplicated everything and have a total accessibility /FAIL/ to boot.

Without a live copy and the full code - it's all just wild guesses in the dark.

 

I'll get up a tester page later today. I'm uploading some massive video files right now.

 

Ugh. Never mind. I'm just going to have to deal and set a height for everything and put in the wrapper. People with lower res screens are just seeing a REAL MESS. I give up.

 

Nah, don't give up (unless you have a deadline).

I don't bother with resolutions under 600x800 and sometimes I'll do an exception to those (if the main content can be read and there's an offscreen sidebar, that's not too bad) and anything under is likely a mobile of some sort... it can be done. AP I would think makes smaller screens harder to deal with.

So if you ever want an idea (in code) of how to do a page layout like that using the HTML flow, let us know, post the code you have.