CODEWITHSUNDEEP
javascripthtmlcssdoctype
MisterHazza
MisterHazza

Reputation: 198

Why is <!DOCTYPE html> changing page layout?

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?

Upvotes: 2

Views: 1282

Answers (2)

Gershom Maes
Gershom Maes

Reputation: 8150

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%;.

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272909

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:

Upvotes: 0

Related Questions