Definitive guide to learn about CSS backgrounds. All CSS attributes for backgrounds with multiple examples and techniques to apply various effects on your website.
Backgrounds are one of the main graphic elements that we can provide in a web design, not only for the background of the entire page, but also for the elements or boxes it contains.
Like any visual style, defining the funds is the responsibility of the CSS and never from HTML. In this article, we’re going to look at different ways to apply backgrounds to page elements, along with some helpful tips.
How to apply color backgrounds with CSS
Backgrounds are applied via CSS properties. Many settings are available to define an enormous amount of background detail, so we will find various properties.
The easiest way to apply a background is to use the background-color property, indicating below the RGB of the color that we want to apply.
body { background-color: #0f1473; }
In this case we have applied the background to the BODY tag, so it is a background that will affect the entire page. However, we can apply funds to any element we want.
h1 { background-color: #f5f5f5; }
How to apply image backgrounds with CSS
We can also apply a background to an image, with the background-image attribute, as follows.
body { background-image: url(background-gradient.png) }
Generally, the images that we apply as background are will compose with a mosaic. That is, if the image is not large enough to fill the entire page (or the entire element to which a background has been applied), that same image will be repeated, over and over again, to fill all the available space.
This can help us a lot when we have a pattern that we want to repeat, forming a homogeneous design for the entire element. Regardless of page size, the background will repeat and cover all available space.
For example, this image is 400×400, but we could put it in the background of the page and it will form a mosaic that will fit all possible screen sizes.
body { background-image: url(pattern.png) }
Other attributes to define the background with CSS
We have seen two basic attributes for backgrounds, such as background-color and background-image, but there are many more. We are going to explain what you should know for most needs.
background-repeat
This attribute is the one that has the responsibility of deciding if we really want an image to be displayed as a mosaic, or if we want it to appear only once.
body { background-image: url(pattern.png); background-repeat: no-repeat; }
This would make the pattern only visible once and therefore not cover the entire page if the image is not large enough.
But we can define that this image is displayed by making a mosaic vertically or horizontally.
body { background-image: url(pattern.png); background-repeat: repeat-y; }
This will be repeated vertically. If we use repeat-x the tiling will occur horizontally. Also, the default value is repeat, which corresponds to the normal behavior of the tile.
background position
This attribute is used to define where the background is going to be placed, on the element or on the page. Initially the position will be “0 0”, which means that the top left corner of the image will be placed in the top left corner of the element to which the background has been applied.
body { background-image: url(background.png); background-position: center; }
This example will cause the image to be placed in the center. Then it will be repeated as tile, because sometimes it will be difficult to identify it, it depends on the size and shape of the image.
To see it well, you may have to remove the mosaic effect:
body, html { height: 100%; } body { background-image: url(my-background.png); background-position: center; background-repeat: no-repeat; }
In this example, our pattern will be placed in the center position of the page.
The height style: 100% is necessary so that the page occupies the entire vertical, because if we do not place it, the background cannot be placed in the center of the vertical, unless the page has enough content to cover the entire page. vertical of the browser window.
The background-position actually admits two values. One for the horizontal position and one for the vertical.
body { background-image: url(pattern.png); background-position: 100px 500px; background-repeat: no-repeat; }
This would cause the background to be shifted 100px to the right and 500px down.
background-size
This attribute is very powerful to define not only the size of the background but also how it will cover the entire element where we put it.
For example, a very useful setting is “cover” which allows the background to cover all available space.
body { background-image: url(background-css.jpg); background-size: cover; }
This is how we get the background always cover the entire containerwith which it will be enlarged or chosen to achieve it, but always maintaining the proportions.
The “cover” option does not guarantee that the image is fully visible, because it depends on the aspect ratio of the image and the aspect ratio of the element where the background is applied. So there is another possible attribute called “contain”, which ensures that the image will look complete, even if it leaves space in the container uncovered.
body { background-image: url(background-css.png); background-size: contain; }
It also supports us to indicate the size of the image that we want to apply:
body { background-image: url(background.jpg); background-size: 100px 300px; }
In this case, 100px refers to the horizontal size and 300px to the vertical size.
background-attachment
This CSS attribute applies to the way the background is attached to the container, in case you can scroll over it. The truth is that it is not used much, but it can be used to do some interesting effects.
Its three possible values are scroll, fixed, and local. The default value is “scroll”, which causes the background to move when the container scrolls, but if we want the background to stay fixed we can use fixed.
body { background-image: url(background-gradient.png); background-attachment: fixed; }
background-origin
Defines where we want the background to be painted. Again, not used much. Generally the backgrounds are painted on the entire element, including the padding. But we could define other behaviors such as painting only in the content area, without including the padding.
div { background-image: url(pattern.png); background-repeat: no-repeat; background-origin: content-box; padding: 40px; border: 3px solid red; }
In this case content-box makes the background not occupy the space of the padding. If you don’t have the padding attribute, it doesn’t make sense to use it and also, if you don’t put background-repeat: no-repeat; it will also be impossible to see the effect.
There are other attributes such as background-clip that you can investigate on your own, but the truth is that they are not very useful.
Multiple backgrounds in the same element with CSS
As of, it is possible to apply many image backgrounds to the same element. For this we can simply indicate all the background images that we want to use, separated by commas.
body { background-color: #f5f5f5; background-image: url(gradient-background.png), url(pattern.png); background-position: 0, center; background-repeat: no-repeat, repeat; background-size: cover, car; background-attachment: fixed, scroll; }
it’s possible apply as background all the images you need. The first one you apply will be the one that stands above the others. You can work with transparency in the images so that the images that you put later can be seen.
In the case of transparencies, the .png image format is recommended, since it allows transparency through alpha channel, which will make it look good regardless of the background where we place it. You can learn other things about here.
To apply the other background attributes, you can also assign them individually to each image, by separating the values by commas, as seen in the previous example. This way you can achieve things like some images remain fixed and others move when you scroll over the element, expanding the possibilities of your design.
Shortcut background to apply various CSS background attributes
Instead of specifying the details of your background with a huge number of different attributes you can use the background summary by specifying all the background values, separated by spaces.
body { background: url(pattern.png) repeat fixed #b0ffe3; }
You can place any type of background attributes. The only problem with this summarized way is that you want to place various attributes and not be able to mix them in the correct syntax. If it is something simple, the rule that we recommend you remember is that the last value will be that of the flat color. You can usually mix the other values without problems, but sometimes to avoid getting involved it is preferable to go to the complete properties (instead of the shortcut) and thus you are sure that the browser will not make a mistake when interpreting it.
Tips for the use of funds
It is important to take into account several tips so that your funds are not a nuisance when visiting the page. In summary, the most important would be the following points:
usability
The background should not hinder the readability of the content, so it is important that if you use backgrounds that you apply enough contrast with the texts. It is also very uncomfortable that the backgrounds have light and dark colors, because then the texts, neither light nor dark, will not be read well.
Always place a colored background as fallback
It is always interesting to place a background color in the elements that have background images. Thus, if the image does not load, at least the color will be seen.
h1 { background-color: #f5f5f5; background-image: url(background-gradient.png); }
transparencies
If you want to place slightly transparent backgrounds on the elements of your page, to achieve different effects, you can do it in two main ways.
If they are flat color backgrounds, use the , which allow a flat channel.
h1 { background-color: rgba(30, 200, 150, 0.4); }
If the background that you want to put with transparency is on an image, the simplest thing is that you save the image itself with a transparency and therefore the logical thing to do is to use the 24-bit png formatwhat’s wrong with it alpha channel. There are also other more complex techniques such as using pseudo-elements like ::before that we leave for your own research.
Backgrounds with gradients
Lately backgrounds with gradients are in style. We can find them in many web pages. You can make these backgrounds with images, but we also recommend exploring CSS gradients, which allow for very attractive effects and have the advantage of adapting to all screens and not consuming the transfer of images.
You can read about the . In addition to normal gradients, you can also use these same…
Facebook Comments
Disqus