16- Learn CSS Fundamentals / Background

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

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

IMAGE REPEATCOLOR
POSITIONATTACHMENT

BACKGROUND-COLOR
div {
width: 550px;
height: 550px;
background-color: #72B63C;
}
Enter any color format

background-image
url(image)
linear-gradient

radial-gradient

BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: url("tree.png");
}

background-image
url(image)

linear-gradient
radial-gradient

BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: linear-gradient(blue, yellow);
}
LINEAR GRADIENT / VERTICAL
READY TO USE CODE

BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: linear-gradient(to right, blue , yellow);
}
LINEAR GRADIENT / HORIZONTAL
READY TO USE CODE

BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: linear-gradient(to bottom right, blue, yellow);
}
LINEAR GRADIENT / DIAGONAL
READY TO USE CODE

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

BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: linear-gradient(blue, yellow, green);
}
LINEAR GRADIENT / MULTIPLE COLOR STOPS
READY TO USE CODE

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%

background-image
url(image)

linear-gradient

radial-gradient

BACKGROUND-IMAGE
0%
Gradient ray
100%
Ending shape

BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: radial-gradient(blue, yellow);
}
RADIAL GRADIENT / NORMAL
READY TO USE CODE

BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: radial-gradient(circle at top right,
blue, yellow);
}
RADIAL GRADIENT / POSITION
READY TO USE CODE

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

BACKGROUND-REPEAT
div {
width: 550px;
height: 550px;
background-repeat: ;
}
repeat-x
repeat-y
repeat
no-repeat

BACKGROUND-ATTACHMENT
div {
width: 550px;
height: 550px;
background-repeat: no-repeat;
background-attachment: ;
}
scroll
fixed
Scrolls with the page.

BACKGROUND-ATTACHMENT
div {
width: 550px;
height: 550px;
background-attachment: ;
}
scroll
fixed
Does not scroll with

the page.

BACKGROUND-POSITION
div {
width: 550px;
height: 550px;
background-attachment: scroll;
background-position: 100px 20px;
}
X Y

BACKGROUND-POSITION
div {
width: 550px;
height: 550px;
background-position: 50% 50%;
}
X Y

BACKGROUND-POSITION
div {
width: 550px;
height: 550px;
background-position: ;
}
X
top left
bottom right
Y

BACKGROUND SHORTHAND
div { background: color image repetition attachment position }
background: #0f0 url("tree.png") no-repeat fixed right top
EXAMPLE

TOOLS: CHROME DEVELOPER TOOLS
Contrast information

TOOLS: CHROME DEVELOPER TOOLS
Meets the minimum recommended contrast ratio (AA).
Meets the enhanced recommended contrast ratio (AAA).

TOOLS: GRADIENT MAGIC

TOOLS: WEBGRADIENTS

inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES

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.
inarocket.com

16- Learn CSS Fundamentals / Background

More Related Content

Similar to 16- Learn CSS Fundamentals / Background

More from In a Rocket

Recently uploaded

16- Learn CSS Fundamentals / Background