Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    92
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Match Div Background to actual Background - resize issue.

    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

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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    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;

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    92
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    Last edited by dommy; 01-14-2008 at 11:40 PM.

  • #4
    Regular Coder
    Join Date
    Oct 2006
    Posts
    164
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dommy View Post
    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
    Not much, but its something.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Quote Originally Posted by dommy View Post
    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.

  • #6
    New Coder
    Join Date
    May 2006
    Posts
    92
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Lol - Since firefox has been around - I kinda have to agree.. But at least in ie i can change scrollbars :P

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    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.

  • #8
    New Coder
    Join Date
    May 2006
    Posts
    92
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Why would you say changing scrollbars to match your design is amateur - from an artists point of view I have to heavily disagree!

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    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 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:
    Quote Originally Posted by Antoine de Saint-Exupéry
    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.
    Last edited by VIPStephan; 01-15-2008 at 12:42 AM.

  • #10
    New Coder
    Join Date
    May 2006
    Posts
    92
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by VIPStephan View Post

    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    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.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I saw a very good explanation 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
    Last edited by Excavator; 01-15-2008 at 02:35 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •