Why is changing page layout?

Question

I was writing a web page with a background image. Here is the CSS for that:

body {
    image-rendering: pixelated;
    background-image: url("Images/page-background.png");
    background-size: 100% 100%;
}

That worked fine; the image had the same dimensions as the page. I then realised that I had forgotten to include <!DOCTYPE html> at the top of the html, so I added, because I thought that it wouldn't change anything. When I loaded the page back up again, the background image was repeated everywhere, all over the page. Can anyone explain why this has happened, and what I can do to fix it? Is removing the <!DOCTYPE html> again actually ok, or is there a way of fixing it?

DIfferent doctypes have different default behaviors, because of changes to the HTML standard over time. That's the whole point of this tag, to allow you to select the version you want. — Barmar, Apr 28 '20 at 17:12
Does your html document literally include `` and `` tags? I suspect that on your first attempt, your browser considered your content to be a pure image (the same kind of interpretation which occurs when right-clicking an image, and saying "open in new tab") whereas with the ` ` you forced chrome to render as an html document — Gershom Maes, Apr 28 '20 at 17:12
I tried adding background-repeat: no-repeat; and the image didn't have the same dimensions of the web page. is there something else I could do? And yes it does include head and body tags. — MisterHazza, Apr 28 '20 at 17:12
Is removing the ok? Without it, will the web page look different for different browsers? — MisterHazza, Apr 28 '20 at 17:14
try: background-image: url("Images/page-background.png"); height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover; — Muhammed B. Aydemir, Apr 28 '20 at 17:17
Thanks for the comment! What does vh do as a matter of understanding? — MisterHazza, Apr 28 '20 at 17:20

Gershom Maes · Accepted Answer · 2020-04-29T03:43:09.397

This should get you a single image showing at the full size of the browser, even if you have a <!DOCTYPE> (which I recommend you do include, as it's better practice):

html, body {
  width: 100%; height: 100%;
  margin: 0; padding: 0;
}
body {
    image-rendering: pixelated;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

Note it's important to make sure that html and body elements have 100% size (and to remove any default margin + padding added by browser).

Note I used a random example image.

EDIT: D.Pardal rightfully pointed out that this answer does not explain the difference observed.

Most of the explanation comes from the fact that:

Adding <!DOCTYPE html> puts the document into "standards mode"
"Standards mode" dictates that the body element's height defaults to the minimum size needed to contain its content

The original version without <!DOCTYPE html> has a <body> which fills the page. Applying a background-image to this <body>, with background-size: 100% 100% fills the entire page. Adding the DOCTYPE shrinks the body's height.

"Why is the image visible at all if its height is equal to the <body>'s height of 0?"

Because the body has default margins, applied by the browser, and these count towards the height of the background-image.

"Why wasn't the image repeating in the first place?"

It was repeating! The first repetition, however, was big enough to fill the entire parent. This can be verified by removing the DOCTYPE and shrinking the image's size to background-size: 20% 20%;.

Thanks very much @Gershom for the answer. This didn't work initially, but then I changed 'background-size: contain;' to 'background-size: 100% 100%;' and it worked! Thanks very much. — MisterHazza, Apr 28 '20 at 17:31
@PrimeCubed you should not make the html and body element position:absolute this is a very bad idea and it's not needed at all. All you need is this: https://jsfiddle.net/bt75cvx6/ (or https://jsfiddle.net/bt75cvx6/1/) — Temani Afif, Apr 28 '20 at 20:06

score 0 · Answer 2 · answered Apr 28 '20 at 20:13

As I explained here: How to remove the stripes that appears when using linear gradient property You are facing a complex background propagation when setting the bacground-size:100% 100% with the doctype added:

body {
    image-rendering: pixelated;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");
    background-size: 100% 100%;
    background-position: center;
}

The same will happen with a gradient coloration because a gradient will have a size 100% 100% by default:

body {
    image-rendering: pixelated;
    background-image:linear-gradient(to bottom,red,blue);
}

To fix your issue you simply need to make sure the html element is at least height:100%

html {
  min-height:100%;
}

body {
    image-rendering: pixelated;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");
    background-size: 100% 100%;
    background-position: center;
}

If you remove the doctype will fall into the quirks mode and things will behave differently but you should not really care about this because you must add the doctype to your document:

Why is changing page layout?

2 Answers2