Set the image to the background image property with. CSS Background. Complete guide. How to make the background more attractive
short information
CSS versions
The values
url The value is the path to the graphic file, which is specified inside the url () construction. In this case, the path to the file can be written either in quotes (double or single), or without them. none Cancels the background image for the element. inherit Inherits the value from the parent.HTML5 CSS2.1 IE Cr Op Sa Fx
Object Model
document.getElementById ("elementID") .style.backgroundImage
Browsers
Internet Explorer 7.0 or later applies a background to the inside of the border of an element that has its 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 spec. The difference in display will be noticeable if the borders are dashed or dotted rather than solid.
If the element is set to scroll or auto, Internet Explorer 8 will have a one-pixel vertical delay when the background scrolls.
Internet Explorer 7.0 or later 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 display the background for the line correctly (Fig. 2).
Figure: 1. Repeating the background for each cell
Figure: 2. Background for the entire line
I think there is not a single site where the property is not used CSS background... It would seem, what could be simpler than this property? But no, its capabilities are much wider than the usual purpose of a picture or color as the background of a page. Something will be familiar, but something will surely become a novelty for many. In any case, it will be useful to thoroughly know how background works.
CSS3 has brought a lot of new things to the property, this is transparency and the assignment of multiple images as a background, but we'll talk about that below, and first let's look at the basics of the property. background.
background-color
I'm pretty sure you have done background color assignments a number of times. This can be done using several types of notation: regular (color name is used), hexadecimal or RGB notation. Each type is equal, use whichever you like best. I try to use the shortest option, and for the sake of 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 has support for transparency, so you can add it to our color too, like this:
P (background-color: rgba (255, 0, 0, 0.5);)
The last digit was set to 50% transparency. You can set the transparency value from 0 (completely transparent background) to 1 (completely 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 the background, and each creates a kind of layer, so each subsequent one is superimposed on the previous one. Why might this be useful? Everything is quite simple - let's say you need to fasten the little things in each corner of the site. Given a more or less fluid layout, using one image is not an option. Therefore, we make 4 "layers", we 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 in the code, I think this is understandable.
There are two rules to keep in mind when using any image as a background:
- set a contrasting background color in case the user cannot display a picture for some reason. It can turn off the display of images corny, 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 broad enough. All browsers, even IE8, support this property.
background-image:
Description
Background-image property (from the 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. (This way, the color will be visible in the transparent parts of the image).
Terms of Use
Starting with CSS3 (separated by commas), you can specify several background images at once. This will make the lower background images visible through the transparent areas of the upper background images.
JavaScript
[object] .style .backgroundImage \u003d "[value]";
Browser support
Specification
The values
All values \u200b\u200bCSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
None Indicates no background image. url (
background-image: url (myImage.png);
Url ("
background-image: url ("myImage.png");
Inherit Indicates that the element should inherit the parameters of the parent element.
Initial value: "None".
Usage example
Code Listing
Background image
Document with multiple background images.
Website design starts with a background.
It will be correct to prescribe the background color - property background-color, for safety net, if the picture does not load. In brackets url () specify the path to the folder with pictures.
By default, the image will repeat itself like a "tile" until it fills the entire browser screen, as we move down the page, our "tile" fills both the second screen and the third, just as long as the page content ends. It is clear that such a result is not the height of a design idea, and we will not have a "bathroom", but just a blog, where readability is a very important point.
A simple option 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 also be a good solution to find a seamless texture, when multiplied, 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 repeats horizontally only.
The next helper is property background-position, allows you to position the background image anywhere on the screen. This technique 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.
Heading
An example of a non-repeating background with a given positioning.
The picture is displayed only once and is located on the right.
The indent from the right edge is set to 200 px in order to avoid collision of the text with the background.
If we want the picture to be always visible when scrolling down the screen, we need to add the 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 by search engines and gets into search results. Properties CSS background-image - make the site unique and beautiful, that is, this design, which 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 won't work if put in 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-code:
- this will have a positive effect on 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 its low weight.
- you, as a webmaster, find it easier to work with clean code.
Well, we have considered more or less all the options using the property CSS background-image... More practice friends! Feel free to copy the code and come up with your own options!