Closed Bug 243751 Opened 20 years ago Closed 20 years ago

background images on body no longer positioned relative to larger of viewport or body

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
VERIFIED INVALID

People

(Reporter: bugzilla, Unassigned)

References

(
URL
)

Details

(Keywords: css2, regression)

Attachments

(2 files)

correct position of the image
69.41 KB, image/png
Details
wrong position of the image
64.52 KB, image/png
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040515
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040515

Newer versions of Mozilla have a problem with CSS-statement
background-position:center; The result is a misalignment of the background-picture.

Using Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040515 it
works fine, but a test with Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;
rv:1.8a) Gecko/20040507 Firefox/0.8.0+ showed the error described.

I will deliever 2 pictures, where the problem is shown.

Reproducible: Always
Steps to Reproduce:
1. Go to http://aquachan.de/
2. Look at the "Aquachan"-Logo

Actual Results:  
"Aquachan"-Logo is not at the center of the page, but half the way behind the
menubar.

Expected Results:  
"Aquachan"-Logo should be displayed at the center of the page

    
    

    
  


  

    
    

    
  
I have never seen the bug in any previous versions of Mozilla including latest
Mozilla 1.7 nightly. So it's probably a regression, which happend in the trunk
after branching of Mozilla 1.7
Keywords: css2, 
          
            regression

    
    

    
  
Actually, this is the right layout of that CSS.  Every previous version of
Mozilla has been buggy with regard to its sizing of the root element (bug
15405), which lead to the previous rendering.  Put a border on the root to see
what it looks like and the rendering should make sense.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID

    
    

    
  
Note also that setting "min-height: 100%" (or "height: 100%", depending on which
effect is desired) on the root will restore the previous behavior.

    
    

    
  
<http://www.w3.org/TR/CSS21/colors.html#q2>:
> The background of the root element becomes the background of the canvas and
> covers the entire canvas, anchored at the same point as it would be if it was
> painted only for the root element itself. The root element does not paint this
> background again.

-> VERIFIED INVALID
Status: RESOLVED → VERIFIED
OS: Windows XP → All
Hardware: PC → All

    
    

    
  
Ok, I see that this is a correct behaviour regarding CSS2 specifications.

But I encountered another problem with the solution mentioned in comment #5. I
tried to set min-height:100% and height:100% to the body, I tried to set
min-height:100% and height:100% to a div-container and I tried to set
min-height:100% and height:100% to a table. But in none of this cases there was
the expected behaviour of stretching the height of the box to the whole height
of the screen. Setting height to a pixel value worked as expected, but
min-height:100% and height:100% only stretch the box to fit the content of it
but not to the whole height of the visible screen.

I have two testcases for it.

TestCase 1: http://www.aquachan.de/MozTestCase/Bug243751/testcase1.htm
TestCase 2: http://www.aquachan.de/MozTestCase/Bug243751/testcase2.htm

In testcase 1 I set the body (with red border) to height:100% and the inner div
(with black border) to height:100%. But the height of the div is only the height
of the &nbsp; in the div-container and not (as I would expect) the whole canvas.

In testcase 2 I set the body to a fixed height of 600px; In this case the height
of the div-container stretches to the height of the body (i.e. 600px).

Do I have an error in reasoning or isn't it possible to create a div with
height:100% in Mozilla without giving the body a fixed size? By the way, IE6 SP1
and Opera 6.05 display testcase 1 as I would expect it.

    
    

    
  
You forgot the HTML element, which has also a 'height:auto'. So a
'body{height:100%}' will become as large as the HTML element is.

Note that Boris meant the HTML element, which is the root element for HTML
documents.

    
    

    
  
Bruno, please test a current Opera version.  Opera 7.5 renders exactly as
Mozilla does....  And "root" means the <html> element; I'm not sure why you were
bothering with all those other elements.

    
    

    
  
I simply forgot that the document root is html and not body. I think I should
read the html-specifications once again...

    
    

    
  
*** Bug 255486 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 275511 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 283499 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 300299 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 296557 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 307603 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 308380 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 308509 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 312665 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 312740 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 314035 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 315522 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 316001 has been marked as a duplicate of this bug. ***
Summary: Wrong alignment using background-position:center in CSS → background images on body no longer positioned relative to larger of viewport or body

    
    

    
  
*** Bug 316647 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 319064 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 319071 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 315512 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 319729 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 320647 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 320826 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 320945 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 321208 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 322149 has been marked as a duplicate of this bug. ***

    
    

    
  
I've seen this happen in the body of a (sub-) frame. The problem I suspect is that this sub-frame-body is implemented as kind of a div. And a div does not take a bigest size height. If you force de body to do that, i.e. in css set the height of the body to 100% the problem is worked-around.

    
    

    
  
(In reply to comment #34)
> I've seen this happen in the body of a (sub-) frame. The problem I suspect is
> that this sub-frame-body is implemented as kind of a div. And a div does not
> take a bigest size height. If you force de body to do that, i.e. in css set the
> height of the body to 100% the problem is worked-around.
> 

Dear Theo, 
I think to set the height to 100% in body or html doesn't solve the problem. Please take a look at https://bugzilla.mozilla.org/show_bug.cgi?id=317679
and http://www.iomeda.com/testzugang/firefox/

    
    

    
  
i can confirm that adding an "html {height: 100%;}" declaration to my CSS did fix this for me in camino - though not in firefox [funny - i thought they both used the same page rendering code?].

am i alone in never having come across the concept of defining styles for the "html" element before? - even after applying this "fix" i'm still not sure why it works - nor why it didn't work beforehand, without this CSS declaration. camino and firefox were the only browsers which displayed this behaviour.

    
    

    
  
> Please take a look at https://bugzilla.mozilla.org/show_bug.cgi?id=317679

Which is invalid.

I suggest people commenting on this bug actually read the section of CSS 2.1 on background positioning before making more comments...

    
    

    
  
*** Bug 315980 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 317679 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 322926 has been marked as a duplicate of this bug. ***

    
    

    
  
In the mean time I've learned more. Indeed I don't consider the unexpected behavior to be a bug. For an explanation see http://www.iminc.nl/ffoxtst/
With thanks to Boris.
Theo van Eijndhoven

(In reply to comment #34)
> I've seen this happen in the body of a (sub-) frame. The problem I suspect is
> that this sub-frame-body is implemented as kind of a div. And a div does not
> take a bigest size height. If you force de body to do that, i.e. in css set the
> height of the body to 100% the problem is worked-around.



    
    

    
  
*** Bug 323384 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 323610 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 343947 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 347654 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 358902 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 360366 has been marked as a duplicate of this bug. ***

    
    

    
  
Just tried a discrete test case in IE: (Didn't test using percentages). I was able to walk the background image around the viewing area of the browser and finish with image in the center which is the desired behaviour. 

Begin Test Cases:
background-position:  top left;
background-position:  top right;
background-position:  bottom left;
background-position:  bottom right;
background-position: top center;
background-position: right center;
background-position: bottom center;
background-position: left center;
background-position: center center;
End Test Cases

Firefox and Opera displays nothing when the bottom positioning is used and the final center positioning is unusable in terms of layout and design.
I know that there are work arounds...but to my mind the test cases above are inline with common sense and the intended behaviour.

Reference:
http://www.w3.org/TR/CSS21/colors.html#propdef-background-position

    
    

    
  
OK! Have a solution that works IE, FF & Opera

Shorthand:
html{min-height:100%;}
body{background: center no-repeat url(anyImage.jpg) fixed;}

Thanks,

N!

    
    

    
  
I don't get why they don't see the problem.  When you stick height on html, the position of the background image will always follow only the size of the window, even if content in the body is longer than the height of the window.  Your background image will appear far up on the page, and firefox will try to tell you that the html border cuts off the rest of the page.  Go try it.  Add a 0px margin and padding border to html, body, and a div or something, then stick 100% height on html, and add more content in the body than the height of your window, the html's border will cut right through the body and div elements, and your image will be positioned in the middle of that border, not the middle of the body's border.

When you stick height on the body, Firefox decides to add a useless scrollbar for no real reason... but your image will be correctly centered at 50% or whatever percent height in the body.

    
    

    
  
HI!
   Try using this: body{background: center no-repeat url(anyImage.jpg) fixed;}

This places the background-image in the center of the screen / viewable area.
Which is the problem I was trying to solve.

Having tried the various CSS solutions as suggested on this board and others, I think that the it's the background-attachment: fixed; property that really solves the problem. I've tested it in [FF, Opera, IE (Windows)] and it works correctly, even when html{min-height: 100%;} is omitted.

If I understand this correctly, the background-attachment property takes its positional values from the viewable area and not the height / width of the document / tag / element. So when the screen is resized using the mouse, the bgImage position always flows to the center of the screen.

I hope that this is a 1/2 decent explanation. Try it out and let me know if it works for you:-> body{background: center no-repeat url(anyImage.jpg) fixed;}

N!

(In reply to comment #52)
> I don't get why they don't see the problem.  When you stick height on html, the
> position of the background image will always follow only the size of the
> window, even if content in the body is longer than the height of the window. 
> Your background image will appear far up on the page, and firefox will try to
> tell you that the html border cuts off the rest of the page.  Go try it.  Add a
> 0px margin and padding border to html, body, and a div or something, then stick
> 100% height on html, and add more content in the body than the height of your
> window, the html's border will cut right through the body and div elements, and
> your image will be positioned in the middle of that border, not the middle of
> the body's border.
> 
> When you stick height on the body, Firefox decides to add a useless scrollbar
> for no real reason... but your image will be correctly centered at 50% or
> whatever percent height in the body.
> 



    
    

    
  
In reply to your reply, I already know about centering and image in the middle like that.  I used percent values of 50% so it's easy to tell if it's right or not.  That solution wouldn't fix the problem if someone wanted to place an image at say 25%x and 50%y, or 50%x and 32%y, or sometrhing like that, because the percentages will go by content only, never by the viewport unless you use height in something... and as I stated, sticking height on html makes it always abey the html container, and makes the html container only obey what maximum window size you can make is (what is that on a 1024x768 resolution, a box about the size of 1024x668 in size?  It's the maximum size you can make your viewport.) Sticking it on the body makes a scrollbar appear. Sticking min-height on html causes a scrollbar to appear, too, even when the body
content isn't long enough to need one.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html {
min-height:100%;
background-image: url('image.gif');
background-repeat: no-repeat;
background-position: 50% 50%;
border: solid red 1px;
margin: 0px;
padding: 0px;
}
body {
border: dashed blue 1px;
margin: 0px;
padding: 0px;
}
div {
border: dotted black 1px;
margin: 0px;
padding: 0px;
}
</style>
<body> <div>(add more and less content than page height and test height on
everything.  Only sticking stuff inside a table makes it work the way I want
to. I used 50% x and y just to easily tell if it was in the right place.)</div>
</body>
</html>

Actually, from what I've read, there is still a bug, and that scrollbar
appearing is part of it, because according to the W3 itself, when you state a
height like this for the root element, it goes by the size of the viewport. 
And seeing as that even with a 0 margin and padding on everything, it still
goes 1 pixel beyond the size of the viewport forcing an "illegal" scrollbar,
that's wrong, now, isn't it?  Because that's not going exactly by the viewport,
it goes 1 pixel beyond it and creates an annoyance.  The W3 states that a
scrollbar should only be supplied if the CONTENT extends beyond the viewport,
so FIX IT.  Then we should be able to state a height like your solution, Indigo, and have it work the way we want.

Also, stating a height of 100% on html.. I don't get anyway.  Here, I'm reading about the container boxes, and have to ask where it says anything about the html doing what the body should do.  The body's container extends with the height of the content. If I state 100% height on html, what container governs what that percentage means?  I can get that the body's height is calculated by the html container, but then html container should have a set value of some kind to make things under it work correctly... and that should go by the viewport, so that the html content box IS the viewport size in ANY situation, no height needed to be stated because not specifying a height is the same as stating "auto", according to the W3 notes about it.

Also, I'm reading that Firefox does this wrong, too.  When you state a height like that, it goes by the viewport.  But also, it states FIRST that the container stretches to accomodate the height of the content (understandable for body, since the body is the actual DISPLAYED content that you see in the viewport, not for html, since html accomadates the entire document area, so that should include empty space in the viewport, since it's still part of the whole document... otherwise, they might as well display blank grey like Photoshop for the empty content area.).

But as you try, you can see that when you add height 100% to html, it does not stretch beyond that to accommodate the height of the content, so any background image using a percentage will go by the size of the viewport, not the stretched size of the content.  BUG.  If you add a height 100% value, min or not, then the html container extends 1 pixel BEYOND the viewport, so it creates a scrollbar for 1 pixel that is not necessary, because that goes beyond the veiwport.  Even 1 pixel is still wrong because it creates an undesired effect that shouldn't be created according to W3C rules. So, BUG.  If I take the border off, then it works, I guess, but then again, the border isn't supposed to extend past the bottom, either, it should fill the first and last pixel of the inside of the container anyway, otherwise it would have to make a box outside the width and make horizontal scrollbars as well.

And again, doing the same thing with body, adding height 100%, makes a scrollbar appear, too.

    
    

    
  
Excuse me, but this is a bug reporting system, not a help board.  Please take discussion about how to author CSS to a more appropriate forum.

This bug is INVALID because the current rendering is per the CSS specification.

    
    

    
  
I hate when people only start to read something, then make irrelevant posts in reply.  I already pointed out 2 problems, and made a lengthy argument about it here, too, along with screenshots.
https://bugzilla.mozilla.org/show_bug.cgi?id=376770#c15

THIS is WRONG, because Firefox is saying that the bottom border of html that extends 100% cuts off the rest of the content inside it.
http://img253.imageshack.us/img253/2021/ffborders5lp9.jpg

The border is being rendered by Firefox according to how it's programmed to render  html with a height of 100%.  That screenshot obviously shows that Firefox doesn't extend the html container to the height of the content when larger than the window.  Oh well, though.  I guess because "it works if you do this to bypass how Firefox renders it normally (even if it messes up how other things are rendered)" doesn't make it a problem. Sounds kinda like sticking a clothes hanger on a broken antenna to make it work right... it isn't the antenna that's broken, it's the radio waves that aren't acting in favor of it.

    
    

    
  
Oh, and I'm still waiting for the explanation I asked for in that report, too.

    
    

    
  
Wait, one more thing I just thought about looking over my own page I'm working on...

I ended up using a table to set my content, and specified the height of the table to be 100%.  So, why is it that all by itself, the table stetches to 100% of the WINDOW, not to 100% the height of the body or html as Firefox is rendering it?  What's more, this table DOESN'T cause a stupid scrollbar to appear for no reason by stretching 1 pixel past the window height or some other dumb thing, it actually extends correctly to 100% the window height.  Why can't I tell the body to do that without a scrollbar?  Why can't the html do it right, either?  I just used the table so that my body and content takes into account 100% the height of the window when the content doesn't go past the window height, and WILL extend the length of the content when the content height NEEDS to go longer than the window height.

And by the way, I didn't ask for help in any part of my post, I stated an argument about the problem.

    
    

    
  
> THIS is WRONG, because Firefox is saying that the bottom border of html that
> extends 100% cuts off the rest of the content inside it.

That's what the CSS spec says to do.  I suggest reading it.

> That screenshot obviously shows that Firefox doesn't extend the html
> container to the height of the content when larger than the window.

As required by the CSS spec.

> Oh, and I'm still waiting for the explanation I asked for in that report,
> too.

Again, this is a bug reporting system, not a CSS authoring help/explanation site....

Please, please go read the CSS 2.1 specification.  If you find a discrepancy between that specification and what Gecko does, _then_ report a bug.  If your problem is with what the specification says, raise that issue with the CSS working group.

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: