CSS

Last Updated: 11/14/2022

Background

background-image

  • Specifies an image to use as the background of an element.
  • You can apply a background to body element, or a section, or a header, and so on
  • By default, the image is repeated so it covers the entire element.
  • When using a background image, use an image that does not disturb the text.
body {
	background-image: url(images/bg-paper.jpg);    
}

background-repeat

  • By default, the background-image property repeats an image both horizontally and vertically.
  • Use no-repeat to show the image only once
  • Userepeat-x to repeat horizontally
  • Userepeat-y to repeat vertically
body {
	background: url(images/bg-paper.jpg);  
	background-repeat: no-repeat;  
}

background-position

  • Used to specify the position of the background image.
  • Keywords possible values are left top, left center, left bottom, right top, right center, right bottom
    center top, center center, center bottom
  • xpos ypos horizontal and vertical position in pixels or percent
  • If you only specify one value, the other value will be 50%
body {
	background: url(images/bg-paper.jpg);    
	background-repeat: no-repeat;
	background-position: 50% 50%;
	height: 100vh;
}

background-position: 50% 50%;
background-position: 50px 50px;
background-position: left center;

background-size

  • Specifies the size of the background image
  • Keywords:
    • auto: The background image is displayed in its original size
    • contain: Resize the background image to make sure the image is fully visible. Aspect ratio is maintained
    • cover: Resize the background image to cover the entire container, even if it has to stretch the image or clip the edges. Aspect ratio is maintained
  • One value: sets the width of the image and height becomes "auto"
  • Two values: width and height
background-size: 300px  300px;
background-size: 300px;
background-size: cover;

background-attachment

  • Specifies whether a background image scrolls with the rest of the page, or is fixed.
  • Possible values are
    • scroll: The background image will scroll with the page. This is default
    • fixed: The background image will not scroll with the page
background-attachment: fixed;

background-origin

  • Specifies the origin position of a background image.
  • Possible values are content-box, padding-box, border-box

Background Color

  • Specifies the background color of an element.

Box Shadow

div {
  box-shadow: 10px 10px 5px 12px lightblue; /*horizontal vertical , blur, spread radius, color
}

Gradients

  • Lets you display smooth transitions between two or more specified colors.

Linear Gradients

  • You must define at least two color stops.
  • Direction
    • to top (0deg)
    • to right (90deg)
    • to bottom (180deg) default
    • to left (270deg)
    • to bottom right
    • diagonal (45)
	background-image: linear-gradient(red, yellow);
	background-image: linear-gradient(red, yellow, green);
	background-image:  linear-gradient(to right, red , yellow);
	background-image: linear-gradient(to bottom right, red, yellow);
	background-image:  linear-gradient(180deg, red, yellow);

	background: linear-gradient(dodgerblue, yellow);
	background: linear-gradient(to right, dodgerblue, yellow);
	background: linear-gradient(to bottom right, dodgerblue, yellow);
	background: linear-gradient(45deg, dodgerblue, yellow); /*from bottomleft - topright*/
	background: linear-gradient(dodgerblue, yellow 30%); /* color starts */
	background: linear-gradient(dodgerblue, yellow 90%);
	background: linear-gradient(dodgerblue, yellow, tomato);
	background-image:  repeating-linear-gradient(red, yellow 10%, green 20%);

radial gradient

width: 200px;
height: 200px;
background: radial-gradient(white, yellow);

width: 600px;
height: 200px;
background: radial-gradient(circle, white, yellow);
background: radial-gradient(ellipse, white, yellow);
background: radial-gradient(circle at top left, white, yellow);

background-image: radial-gradient(red, yellow, green);
background-image:  repeating-radial-gradient(red, yellow 10%, green 15%);

Reference: cssgradient.io

Previous
Next