Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to set a background using CSS. - How to apply different background options: background-color, background-position, background-image, background-repeat and background-attachment. - How to create linear and radial gradients. - Tools: examine background and accessibility information, CSS gradients gallery, etc. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/background.php REFERENCES: - The background CSS property by MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/background - Chrome Developer Tools: Contrast ratio in the Color Picker. https://developers.google.com/web/updates/2018/01/devtools#contrast - Enhanced recommended contrast ratio (AAA) by W3C. https://www.w3.org/TR/WCAG21/#contrast-enhanced - Minimum recommended contrast ratio (AA) by W3C. https://www.w3.org/TR/WCAG21/#contrast-minimum - Gradient Magic: 28 collections and over 1558 unique CSS gradients. https://www.gradientmagic.com/ - WebGradients: free collection of 180 linear gradients. https://webgradients.com/ BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

1. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Background

2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
background-image
background-color
X
Y
background-position
background-repeat
background-attachment

3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
IMAGE REPEATCOLOR
POSITIONATTACHMENT

4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-COLOR
div {
width: 550px;
height: 550px;
background-color: #72B63C;
}
Enter any color format

5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
IMAGE REPEATCOLOR
POSITIONATTACHMENT

6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
background-image
url(image)
linear-gradient
radial-gradient

7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
}

8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
background-image
url(image)
linear-gradient
radial-gradient

9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: linear-gradient(blue, yellow);
}
LINEAR GRADIENT / VERTICAL
READY TO USE CODE

10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: linear-gradient(to right, blue , yellow);
}
LINEAR GRADIENT / HORIZONTAL
READY TO USE CODE

11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: linear-gradient(to bottom right, blue, yellow);
}
LINEAR GRADIENT / DIAGONAL
READY TO USE CODE

12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: linear-gradient(-90deg, blue, yellow);
}
LINEAR GRADIENT / USING ANGLES
180°
-180°
0°
360°
270°
-90°
90°
-270°
READY TO USE CODE

13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: linear-gradient(blue, yellow, green);
}
LINEAR GRADIENT / MULTIPLE COLOR STOPS
READY TO USE CODE

14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: repeating-linear-gradient(180deg, blue, yellow 33%);
}
LINEAR GRADIENT / REPEATING
READY TO USE CODE
33%
33%
33%

15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
background-image
url(image)
linear-gradient
radial-gradient

16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
0%
Gradient ray
100%
Ending shape

17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: radial-gradient(blue, yellow);
}
RADIAL GRADIENT / NORMAL
READY TO USE CODE

18. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: radial-gradient(circle at top right,
blue, yellow);
}
RADIAL GRADIENT / POSITION
READY TO USE CODE

19. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: radial-gradient(blue 0%, yellow 20%,
green 60%);
}
RADIAL GRADIENT / MULTIPLE COLOR STOPS
READY TO USE CODE

20. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
IMAGE REPEATCOLOR
POSITIONATTACHMENT

21. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-REPEAT
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
background-repeat: ;
}
repeat-x
repeat-y
repeat
no-repeat

22. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-REPEAT
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
background-repeat: ;
}
repeat-x
repeat-y
repeat
no-repeat

23. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-REPEAT
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
background-repeat: ;
}
repeat-x
repeat-y
repeat
no-repeat

24. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-REPEAT
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
background-repeat: ;
}
repeat-x
repeat-y
repeat
no-repeat

25. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
IMAGE REPEATCOLOR
POSITIONATTACHMENT

26. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-ATTACHMENT
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
background-repeat: no-repeat;
background-attachment: ;
}
scroll
fixed
Scrolls with the page.

27. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-ATTACHMENT
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
background-repeat: no-repeat;
background-attachment: ;
}
scroll
fixed
Does not scroll with
the page.

28. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
IMAGE REPEATCOLOR
POSITIONATTACHMENT

29. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-POSITION
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 100px 20px;
}
X Y

30. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-POSITION
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 50%;
}
X Y

31. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-POSITION
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: ;
}
X
top left
bottom right
Y

32. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
IMAGE REPEATCOLOR
POSITIONATTACHMENT

33. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND SHORTHAND
div { background: color image repetition attachment position }
background: #0f0 url("tree.png") no-repeat fixed right top
EXAMPLE

34. in a
ROCKET
TOOLS
~ ~ ~

35. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: CHROME DEVELOPER TOOLS
Contrast information

36. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: CHROME DEVELOPER TOOLS
Meets the minimum recommended contrast ratio (AA).
Meets the enhanced recommended contrast ratio (AAA).

37. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: GRADIENT MAGIC

38. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: WEBGRADIENTS

39. Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES

40. We respect your time
No more blah blah videos. Just straight to
the point slides with relevant information.
Ready to use code
Real code you can just copy and paste into
your real projects.
Step by step guides
Clear and concise steps to build real use
solutions. No missed points.
Learn front-end development at rocket speed
inarocket.com

41. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Background