Best way to implement background image on HTML or body
body{
background-image:url('../images/background.jpg');
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}
This would be the best way, you could apply it to the HTML, it really depends on what you prefer...
background-image:url('../images/background.jpg');
Assuming your css file is in a different map, you do ../ to go to the map in which your css folder is placed, then you go into the images file and select the image.
background-attachment:fixed;
When setting a background-image I personally like to use this, it makes it so that when a user scrolls, the background-image maintains it's current position.
background-repeat: no-repeat;
When using this setting, it makes it so that the image won't repeat, in case it is too small or just won't cover the whole background.
background-size: cover;
When you apply this you will set the background-size to cover, combined with no-repeat
and attachment: fixed
it makes for a good way to style your background image
How to add Background Image in CSS and HTML
Try using the background-image
tag. Use min-height: 100%;
to make the image fit the entire page.
<h1>Title</h1>
<style>
h1 {
color: #FFFFFF
}
body {
min-height: 100%;
background-image: url(/*The link goes here*/);
}
</style>
CSS property background-image work for body and not for class
The default value of the height property is auto
for all elements. Since there is no element present in the div element so the height of the div element is 0 in your case, so the image is not fit in the div element.
You can set the height of the div element to auto or any pixel value(if the value exceeds it will overflow ).
height: auto;
or height: 20px:
@Edited:
According to the official docs, The background of the root element becomes the canvas background and its background painting area extends to cover the entire canvas.
The HTML element is the root element. Now, according to your case, you have set the background image to body element and not in HTML element. Thanks to background propagation it will check the background for the root element first and if it is not there then it will propagate to body
element background. As you have set the background image to body so the background image will apply to whole canvas.
Tip: Canvas size is infinite but user agent set its size to the target device.
Applying a background to html and/or body
This is correct behavior.1 In standards mode, body
, as well as html
, doesn't immediately take up the entire height of the viewport, even though it appears so when you only apply a background to the latter. In fact, the html
element will take on the background of body
if you don't give it its own background, and html
will pass this on to the canvas:
The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas, although any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) If the root's ‘background-color’ value is ‘transparent’, the canvas's background color is UA dependent. The root element does not paint this background again, i.e., the used value of its background is transparent.
For documents whose root element is an HTML
HTML
element or an XHTMLhtml
element: if the computed value of ‘background-image’ on the root element is ‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate the computed values of the background properties from that element's first HTMLBODY
or XHTMLbody
child element. The used values of thatBODY
element's background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for theBODY
element rather than theHTML
element.
That said, however, you can superimpose any background image over a background color on a single element (either html
or body
), without having to rely on two elements — simply use background-color
and background-image
or combine them in the background
shorthand property:
body {
background: #ddd url(background.png) center top no-repeat;
}
If you wish to combine two background images, you need to rely on multiple backgrounds. There are chiefly two days to do this:
In CSS2, this is where styling both elements comes in handy: simply set a background image to
html
and another image tobody
which you wish to superimpose over the first. To ensure the background image onbody
displays at full viewport height, you need to applyheight
andmin-height
respectively as well:html {
height: 100%;
background: #ddd url(background1.png) repeat;
}
body {
min-height: 100%;
background: transparent url(background2.png) center top no-repeat;
}Incidentally, the reason why you have to specify
height
andmin-height
tohtml
andbody
respectively is because neither element has any intrinsic height. Both areheight: auto
by default. It is the viewport that has 100% height, soheight: 100%
is taken from the viewport, then applied tobody
as a minimum to allow for scrolling of content.In CSS3, the syntax has been extended so you can declare multiple background values in a single property, eliminating the need to apply backgrounds to multiple elements (or adjust
height
/min-height
):body {
background: url(background2.png) center top no-repeat,
#ddd url(background1.png) repeat;
}The only caveat is that in a single multi-layered background, only the bottommost layer may have a background color. You can see in this example that the
transparent
value is missing from the upper layer.And don't worry — the behavior specified above with propagating background values works exactly the same even if you use multi-layered backgrounds.
If you need to support older browsers, though, you'll need to go with the CSS2 method, which is supported all the way back to IE7.
My comments under this other answer explain, with an accompanying fiddle, how body
is actually offset from html
by default margins even though it looks like it's being padded out instead, again owing to this seemingly strange phenomenon.
1 This may have its roots in setting the HTML background
and bgcolor
attributes of body
causing the background attribute to apply to the entire viewport. More on that here.
Background-image in body?
<body style="background-image: url(#);">
When to use IMG vs. CSS background-image?
Proper uses of IMG
- Use
IMG
if you intend to have
people print your page and you want the image to be included by default.
—JayTee - Use
IMG
(withalt
text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.
Pragmatic uses of IMG
- Use
IMG
plus alt attribute if the image
is part of the content such as a logo or diagram or person (real person, not stock photo people).
—sanchothefat - Use
IMG
if you rely on browser scaling to render an image in proportion to text size. - Use
IMG
for multiple overlay images in IE6. UseIMG
with az-index
in order
to stretch a background image to fill its entire window.
Note, this is no longer true with CSS3 background-size; see #6 below.- Using
img
instead ofbackground-image
can dramatically improve performance of animations over a background.
When to use CSS background-image
- Use CSS background images if the
image is not part of the content.
—sanchothefat - Use CSS background images when
doing image-replacement of text eg. paragraphs/headers.
—sanchothefat - Use
background-image
if you intend to have
people print your page and you do not want the image to be included by default.
—JayTee - Use
background-image
if you need to improve download times, as
with CSS sprites. - Use
background-image
if you need for only a portion of the image to be visible, as with CSS sprites. - Use
background-image
withbackground-size:cover
in order to stretch a background image to fill its entire window.
Related Topics
Items That Span All Columns/Rows Using CSS Grid Layout
Why Is "&Reg" Being Rendered as "®" Without The Bounding Semicolon
Conditional Rendering of Non-Jsf Components (Plain Vanilla HTML and Template Text)
How Can One Create an Overlay in CSS
Transparent Scrollbar with CSS
Can You Style HTML Form Buttons with CSS
What Happens If The Action Field in a <Form> Has Parameters
Fixed Body Background Scrolls with The Page on iOS7
Images in Github Pages and Relative Links
How to Create a Triangle in CSS3 Using Border-Radius
How to Hide Autofill Safari Icon in Input Field
Header/Footer/Nav Tags - What Happens to These in Ie7, Ie8 and Browsers Than Don't Support HTML5