codeGK
Code it ALL
CSS Backgrounds - CodeGK
♦ CSS Backgrounds

♣ About CSS Backgrounds

There are various properties of Background which can be tuned according to requirement.
Below are few properties which can be customized.
  • Background Color
  • Background Image
  • Background Repeat
  • Background Shorthand

♣ Example1: CSS Background Color

In this example, Blue is used as background color.
Example
Input:
Output:

♣ Example2: CSS Background Color2

In this example, Green color is used in background with opacity 0.5.
Example
Input:
Output:

♣ Example3: CSS Background Image

In this example, Caterpillar image is as background image.
Example
Input:
Output:

♣ Example4: CSS Background Image2

In this example, Mountain image is there with 70% of the total page size.
Example
Input:
Output:

♣ Example5: CSS Background Repeat

In this example, there is a small image which will not repeat because of no-repeat keyword.
Example
Input:
Output:

♣ Example6: CSS Background Repeat2

In this example, The small image will repeat only in y-direction because of repeat-y keyword.
Example
Input:
Output:

♣ Example7: CSS Background Fixed

In this example, The background image is fixed while the other text is scrolling.
Example
Input:
Output:

♣ Example8: CSS Background Fixed2

In this example, The image scrolls along with the text, this is the default option, although scroll keyword can be used just to maintain consistency.
Example
Input:
Output:

♣ Example9: CSS Background Shorthand

In this section, it is shown that all the background properties can be used in one line.
It comes handy when to save space and also this makes the page rendering speed.
In this example, Few properties are summed up in one line.
Example
Input:
Output:

♣ Example10: CSS Background Shorthand2

In this example, Few properties are summed up in one line.
Example
Input:
Output:
Prev_LessonNext_Lesson