All geek questions in one place

Is it possible to give a <html> background image in CSS?

Or is this bad practice for some reason?

Thank you very much!

+4
source share
5 answers

I will just add it to the body element, you will get the same effect. Or, if you are looking at a double background, you can look at a CSS3 component that can use this function. (Although this is not compatible with all browser versions)

+4
source

Given your question ...

This is bad practice.

The background for the entire body of the page should be applied to the body tag:

body { background-image:url('sunny.gif') }

This is the best practice.

Just remember that if the image you are using is smaller than the screen, it will repeat!

A commonly recommended practice is to also indicate the appropriate background color, as it will appear immediately (and then be replaced).

 body { background-image:url('sunny.gif'); background-color:#b0c4de; }

Also shortcut:

 body { background: #b0c4de; url('sunny'.jpg) } # could also add repeat/scroll/top

Here is the complete list for the background:

  • attachment background
  • background color
  • background image
  • background position
  • background repeat

Good entries at: http://www.beginnersguidetohtml.com/references/css

+2
source

In my opinion, html is much better for the background than for the body. The W3C recommendation is different. I think this is due to compatibility with very old browsers such as Internet Explorer 5.5, Netscape Navigator 4 or something more exotic. In either case, both places are valid.

http://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html clause 14.2
http://www.w3.org/TR/2011/CR-css3-background-20110215/ clause 3.11

There is a slight quirk.

  • If you set the background at the end of the body, and not on the html, browsers interpret this as a background on html, not on the body.
  • If you set the background to html, everything works as expected.
  • If you set the background for both html and body, you will probably see that the body field is smaller than the html field.
+2
source

I do not think this is a problem. It works in older browsers. Although I would recommend you not to add many other styles to the html tag, it is usually a bit inconsistent in browsers.

-1
source

W3C Schhols says it is not valid:

Basic attributes Not valid in base, head, html, meta, param, script, style, and title elements.

And a list of these invalid attributes is found here

Any reason why you are not specifying the style <body> attribute?

-2
source

Source: https://habr.com/ru/post/1383527/

More articles:


All Articles