...

View Full Version : Match Div Background to actual Background - resize issue.



dommy
01-14-2008, 10:36 PM
Hi All,

Can't get my head around this one...

I'm creating a site which I want to be centered no matter the screen size. The problem is this...

I have a patterned background, and certain graphic aspects will need to show the background pattern (in other words a transparent background) and thus match up with the actual background. Now using auto to center the div causes issues when the page is resized - grab a corner of the window and resize this example and you'll see what I mean.. the pattern doesn't match up and then at times it does.

Link (http://www.cgfolio.co.uk/test.asp)

Haven't a clue how I can fix this.
Anyone?

VIPStephan
01-14-2008, 10:43 PM
Background position at top center?
And by the way: There’s a shorthand that’s much better than writing every property separately: background: url(/images/bg_content.gif) top center repeat-x;

dommy
01-14-2008, 11:11 PM
Yeah I know I could shorten the css - just default dreamweaver :P

Background position at top center? Yeah that works... but what exactly is that doing?

ALSO - if you compare the link above in firefox and ie - you'll notice in ie the diagonals dont quite match around the graphic, but in firefox they do - out by a pixel it seems - any idea why?
UPDATE: Think I fixed it by adding the background details to the body.

Appreciate the help...
Thanks

Sman5109
01-14-2008, 11:42 PM
ALSO - if you compare the link above in firefox and ie - you'll notice in ie the diagonals dont quite match around the graphic, but in firefox they do - out by a pixel it seems - any idea why?

Appreciate the help...
Thanks

Its because IE is flawed and sucks in every way :)

VIPStephan
01-14-2008, 11:47 PM
Background position at top center? Yeah that works... but what exactly is that doing?


What is that doing? It’s doing what it says: Putting the background image at the top and the center. If you put it in the dead center (background-position: center [center];) the center of the page, and the background, respectively, will move if you resize the page in any direction. With the backgound image at the top it will always stay at the same position vertically (as your header image by the way) while the horizontal center moves (as your header image, incidentally).

Now, the different offset is probably a result of the header div being 377px wide which is an odd number and causes rounding issues as 377 can’t be divided by 2 with a straight result. You’ll need an even number, and you’ll probably have to edit the header graphic or the background that the stripes begin a little more left or right, so they eventually match.

dommy
01-14-2008, 11:47 PM
Lol - Since firefox has been around - I kinda have to agree.. :) But at least in ie i can change scrollbars :P

VIPStephan
01-14-2008, 11:50 PM
Changing scrollbars is really amateur, you know?

And besides that it is non-standard and bears accessibility issues as they might not be easily recognizable as scrollbars anymore.

dommy
01-15-2008, 12:22 AM
Why would you say changing scrollbars to match your design is amateur - from an artists point of view I have to heavily disagree!

VIPStephan
01-15-2008, 12:39 AM
Yeah, sure, I know… I’ve dealt with artists that had exactly the same artistic ideas in mind but web design is about compromises and all so called web designers that insisted in having custom scrollbars were just graphic designers that didn’t know a thing about website design. Websites aren’t static images that can be styled in any way and everybody will see the same. There are hundreds of different applications on thousands of different devices with which you can view websites in millions of ways imaginable. The most imminent problem here that those designers didn’t think of is accessibility and usability – two of the most important things in website development – and that the conception they have of a scrollbar doesn’t have to reflect any potential user’s conception of a scrollbar. As described in an admittedly somewhat dated but still valid article (http://www.useit.com/alertbox/20050711.html) a designer should go with the applications’ standard built-in GUI scrollbars.

Then, design in general is also about leaving some space. Don’t put everything in a design just because you can. If I may quote:

It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away.

So, to wrap it up: Just because you can do something doesn’t mean that you have to do it.

And still, custom colored MS scrollbars remind me of all the amateur websites from the mid-90’s.

dommy
01-15-2008, 01:06 AM
You make valid points... but my background is in 3d/compositing, and in this artistic world, if you had the chance, you'd tweak forever - you're rarely satisified with finishing something - always more can be done to further highten the senses and emotions you are trying to build... the applications are just tools to get me on my way, and if that tool holds you back from your creativity then I see it as a problem - if every site had a lovely grey scrollbar, wouldn't the world be boring? - and I'm not talking rainbow colours here - simply picking colours both darker and lighter to match in with the look and feel helps tremendously with geling the content together. Why bother with colour at all otherwise! Who cares what happened in the 90's art is art and it borrows and manipulates from generation to generation... live with it!

This is a matter of opinion when it boils down to it... but fret not, I won't be going for some js scrollbar - if I can't do it simply and effectively across all browsers then its not worth it!

Oh and yes - coders and artists are 2 very different creatures!

Anyways, sorry to have upset you, thanks for the earlier hints though :)

Excavator
01-15-2008, 02:16 AM
Now, the different offset is probably a result of the header div being 377px wide which is an odd number and causes rounding issues as 377 canít be divided by 2 with a straight result. Youíll need an even number, and youíll probably have to edit the header graphic or the background that the stripes begin a little more left or right, so they eventually match.

Even if you have an even number width image, that doesn't mean that someone isn't going to randomly size their browser window at an odd width.
If your using a background image that is pixel aligned to content, center won't work.
Just to prove that... align everything left with a body{padding:10px;} to see.

VIPStephan
01-15-2008, 02:25 AM
Yes, I didn’t explain what I thought of: If the width is an odd number and you resize the window the content and the body background may move differently, becoming visible as some kind of jiggle while moving with the image and the background aligning at an odd viewport width and being one pixel apart with an even width. And this is different in different browsers (i.e. IE might move the background first and then the foreground while Fx does it vice versa, or Safari moves both at the same time, thus, not showing a jiggle). That’s what I meant.

Excavator
01-15-2008, 02:27 AM
I saw a very good explanation (http://www.pmob.co.uk/temp/onepxjog.htm)of this a while back and I haven't been able to find it since. Amazing how many people seem to be asking about this all of a sudden.

Found one... see link



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum