Re: Background image excluding margins

My tests indicate that if the CSS is applied to the html element, the 
background image follows the specified margins. However, it the 
stylesheet is modified to:

body {margin-left: 4% ; margin-right: 4% ; background-color: yellow ;
 background-image: url(100x75.jpg) }

then the background image and background color is rendered all the way 
to the left and right edges (with no margin), while the page content has 
the margins. Interestingly, Amaya renders the background color over the 
entire height of the page, but renders the background image only as far 
down the page as the content of the page (text, etc.), which seems to be 
different from most other browsers. Other browsers render the background 
image over the entire height of the page. I had to change the background 
color to see how it was rendered.

Keith Rubow

Chris Beall wrote:
> A case can be made for either implementation.
>
> BUT, what happens if you place the style on the <body> element?
>
> See http://www.w3.org/TR/CSS21/colors.html#background <http://>
>
> Note the paragraph starting "For HTML documents..." (which includes 
> XHTML as well), the recommendation is to promote any 'background 
> properties' on the <body> element to the parent root element.  Nothing 
> is said about similarly promoting other properties, such as margins.  
> Thus placing your styling on the <body> element should have the 
> desired effect: the background fills the canvas and the margins are 
> imposed on all subsequent content.
>
> I do not have the ability to test this.  Perhaps someone else can 
> report results.
>
> As I recall, the results of styling the <html> element are 
> inconsistent across browsers and therefore best avoided.
>
> Chris Beall
>
>
> --- On *Thu, 8/13/09, José Carlos Santos /<jcsantos@fc.up.pt>/* wrote:
>
>
>     From: José Carlos Santos <jcsantos@fc.up.pt>
>     Subject: Background image excluding margins
>     To: www-amaya@w3.org
>     Date: Thursday, August 13, 2009, 5:31 AM
>
>     Hi all,
>
>     Imagine a HTML page which uses a stylesheet containing a line like:
>
>     html {margin-left: 4% ; margin-right: 4% ; background-color: white ;
>     background-image: url(sandston.gif) }
>
>     When I see such a file with Amaya, the background image also obeys the
>     "margin-left: 4% ; margin-right: 4%" request. In other words, the
>     image
>     doesn't extend to the border. Is this the intended behavior? With any
>     other browser that I have access to, the request concerning the
>     margins
>     applies to text alone, and I think that that's how it should be.
>
>     Best regards,
>
>     Jose Carlos Santos
>

Received on Thursday, 13 August 2009 19:02:21 UTC