short information
CSS versions
Values
url The value is the path to the graphic file, which is specified inside the url() construct. In this case, the path to the file can be written both in quotes (double or single), and without them. none Cancels the background image for the element. inherit Inherits the value of the parent.HTML5 CSS2.1 IE Cr Op Sa Fx
Object Model
document.getElementById("elementID ").style.backgroundImage
Browsers
Internet Explorer up to and including version 7.0 applies a background to the inside of the border of an element that has the hasLayout property set. If the element does not have a hasLayout , the background-image property will respect the element's borders, as specified in the specification. The difference in rendering will be noticeable if the borders are dashed (dashed or dotted ) rather than solid.
If the element is set to scroll or auto , Internet Explorer 8 will have a vertical delay of one pixel when the background scrolls.
Internet Explorer up to version 7.0 does not support the inherit value.
If the background is set for a table row (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Result this example in Chrome browser shown in fig. one. Internet browser Explorer, Opera and Firefox correctly display the background for the row (Fig. 2).
Rice. 1. Repeat background for each cell
Rice. 2. Background for the entire line
And here we come to the main thing, let's rephrase it like this: "The site starts from the background." Most bloggers make "classic blogs" with a white background, but we'll go the other way. Walk past a wonderful property css background-image, we can't.
And what does it do? This property css background-image inserts an image as a background in different elements HTML-pages. It's not limited to the tag. body, and is widely used in website design, for example for: div, li, p, table, header, footer.
Consider an example:
Website design starts with the background.
It will be correct to set the color of the background - property background color, for insurance, if the picture does not load. in brackets url() specify the path to the folder with pictures.
By default, the image will repeat like a "tile" until it fills the entire browser screen, as we move down the page, our "tile" will fill both the second screen and the third, just enough until the content of the page ends. It is clear that such a result is not the top of the design idea, and we will not have a "bathroom", but just a blog, where readability is a very important point.
An easy way to get rid of the "tiling" is to use a large image, at least 1024 px wide, so that it fills the entire screen. It will be too good decision find seamless texture, during the reproduction of which, the picture will be as one whole.
How to make the background more attractive?
Thank God we have helpers for this:
- no-repeat- disable repeat
- repeat x- repetition of the pattern only horizontally
- repeat-y- repetition of the pattern only vertically
For example:
Blog Header
This is a background texture that only repeats horizontally.
Next Helper - Property background position, allows you to position background picture anywhere on the screen. This approach is widespread in modern web design. We have a picture, but it is not part of the content, but serves only as a decoration for the site.
header
An example of a non-repeating background with specified positioning.
The picture is displayed only once and is on the right.
The indent from the right edge is set to 200 px in order to avoid collision of text on the background.
If we want the picture to always be visible when scrolling the screen down, we need to add a property to the code above - background-attachment: fixed;
What's the difference between img and background image?
The difference is fundamental, tag img inserted directly into the body HTML-pages and is responsible for the content (illustrations, photographs, avatars), carries a semantic load. It is very important that the image is indexed search engines and got into search results. Properties css background-image- make the site unique and beautiful, that is, this is the design that should be taken out to an external file css styles or use inside an element style.
Of course, this does not mean that background image will not work if placed in the body HTML-pages. But I strongly recommend that everything related to design be taken out in css. As a result, we get a clean HTML-the code:
- this will positively affect the indexing of the site, search bots will love your site and visit it more often.
- your visitors will also be satisfied, the site will load faster due to the low weight.
- as a webmaster, it's easier for you to work with clean code.
Well, we have considered more or less all options using the property css background-image. More practice friends! Feel free to copy the code and come up with your own options!
I think there is not a single site where the property would not be used css background. It would seem, what could be simpler than this property? But no, its possibilities are much wider than the usual setting of an image or color as a page background. Some will be familiar, and some will be new to many. In any case, it will be useful to know thoroughly how background works.
CSS3 brought a lot of new things to the property, such as transparency, and setting multiple images as a background, but we will talk about this below, but first we will cover the basics of the property background.
background color
I'm pretty sure you've done the background color assignment multiple times already. This can be done using several types of notation: regular (the color name is used), hexadecimal or RGB notation. Each type is equivalent, use whichever you like best. I try to use the shortest version, and for the perception it is simpler and the style file is a little smaller in size.
P (background-color: red;) p (background-color: #f00;) p (background-color: #ff0000;) p (background-color: rgb(255, 0, 0;))
CSS3 introduces transparency support, so we can add it to our color, like this:
P (background-color: rgba(255, 0, 0, 0.5);)
The last digit set the transparency to 50%. You can set the transparency value from 0 (fully transparent background) to 1 (fully opaque).
background image
This property is also used very often, it allows you to assign an image to the background. CSS3 adds the ability to assign multiple images to a background, each creating a kind of layer, so each subsequent one overlaps the previous one. Why might this be useful? Everything is quite simple - let's say you need to screw little things in each of the corners of the site. Under the condition of more or less fluid layout, using one image is not an option. Therefore, we make 4 “layers”, move each image to its own corner and that’s it, the problem is solved
Body (background-image: url("image1"), url("image2"), url("image3"))
If you need to assign one image to the background, we leave only the first one in the code, I think this is understandable.
When using any image as a background, there are two rules to remember:
- set a contrasting background color in case the user does not see the image for some reason. It can tritely disable the display of pictures, saves traffic.
- do not use a background image to convey any important information. For the reason stated above, the user may not see it.
Support for multiple background images is quite extensive. All browsers, even IE8, support this property.
background-image:
Description
background-image property(from English "background image" - "background image") sets the background image of an element.
Note
When setting a background image, you should also specify the background color that will be used if the image is not available. When an image is available, it is displayed over the background color. (So the color will be visible in the transparent parts of the image).
Terms of Use
Starting with CSS3 (separated by commas), you can specify multiple background images at once. This will make the bottom background images visible through the transparent areas of the top background images.
JavaScript
[object] .style .backgroundImage ="[value]";
Browser Support
Specification
Values
All values CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
None Specifies that there is no background image. url(
background-image: url(myImage.png );
Url("
background-image: url("myImage.png");
Inherit Specifies that the element should inherit the settings of the parent element.
Initial value:"none".
Usage example
Code Listing
background image
A document with multiple background images.
Object Model
document.getElementById("elementID ").style.backgroundImage
Browsers
Internet Explorer up to and including version 7.0 applies a background to the inside of the border of an element that has the hasLayout property set. If the element does not have a hasLayout , the background-image property will respect the element's borders, as specified in the specification. The difference in rendering will be noticeable if the borders are dashed (dashed or dotted ) rather than solid.
If the element is set to scroll or auto , Internet Explorer 8 will have a vertical delay of one pixel when the background scrolls.
Internet Explorer up to version 7.0 does not support the inherit value.
If the background is set for a table row (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
The result of this example in the Chrome browser is shown in Fig. 1. Browser Internet Explorer, Opera and Firefox correctly display the background for the line (Fig. 2).
Rice. 1. Repeat background for each cell
Rice. 2. Background for the entire line