Part – 6, Advanced concepts in CSS, background and images.
In this blog we finally start jumping into some advanced concepts in CSS. We will read about background and images and how to style this using CSS.
Background and images
Generally the “background” selector can be used to configure the background properties.
This is a shorthand though and consists of a lot other properties.
- The background-image can be used to set a background image
- The background-repeat can be used to set the repeat behaviour of the background image.
- The background-size gives the sizing for the background image
- Setting the background-size to contain will make sure that the whole image is contained when loading it.
- Setting the background-size to cover will make sure that the entire container is covered with the background image.
Some description of the shorthand on Background property is as follows:
Background shorthand:
background: url(“freedom.jpg”) left 40% bottom 80%/cover no-repeat border-box;
The above background shorthand sets the background-image url, background-position to left and right, sets the background-size, background-repeat and both values of background-origin and background-clip in one go.
Linear gradient:
It can be thought of as a fusion of different colors moving to form a gradient color.
We can style linear gradient as follows:
| background-image: linear-gradient(red, blue); |
The default way the gradient is applied is vertically from top to bottom.
We can change the direction of gradient as follows:
| background-image: linear-gradient(to left top,red, blue); |
Or using degrees:
| background-image: linear-gradient(180 deg,red, blue); |
We can add the property “transparent” along with a color to transition from a color to a transparent gradient.
We can also manually define the percent share of the color in the gradient color as:
| background-image: linear-gradient(red 50%, blue 60%); |
Radial Gradient:
This type of gradient color, unlike linear gradient which moves from one side to the other, moves from one shape or position to the surrounding area (like a circle).
| background-image: radial-gradient(circle red 50%, blue 50%); |
The above piece of code sets the radial gradient in the shape of the circle with red and blue occupying 50% each.
We can even set the reach of the radial gradient as follows.
background-image: radial-gradient(circle farthest-corner at 20% 50% red 50%, blue 50%);
Stacking multiple backgrounds
We can stack multiple backgrounds by chaining different techniques of applying background.
An example here could be as follows:
| background: linear-gradient(to bottom, rgba(80,68,18,0.6) 10%, transparent), url(“images/freedom.jpg”) left 40% bottom 80%/cover no-repeat border-box; |
Filters
Filters can be thought of as an image processor that applies on backgrounds to modify their outlook.
As seen above when we apply the blur filter on the background, the brown color distorts to create a blurred appearance.
SVGs
SVG is a markup language based on XML for describing two-dimensional graphics applications and images, and a set of related graphics script interfaces. These graphics are very useful in setting scalable images which can be infinitely resized.
Svg’s can be resized and positioned based on general css positioning rules.
Summarizing background
So we now know a Background and Image styling in CSS. In the next blog of the “Learning CSS” series, we will be diving a bit deeper to understand some more concepts that we need to be familiar with while implementing CSS!
Hope you like this series and stay tuned for more content on the learning.
Leave a Reply