Learn CSS background in 3 minutes 🌆

hey what's going on everybody it's you bro hope you're doing well and in this video i'm going to show you a few useful things we can do with backgrounds using css so sit back relax and enjoy the show hey welcome back so in this video i'm going to show you how we can change the background color set a linear gradient and how we can set an image as our background so like we discussed in previous videos you can set the background color by changing the background color property and set this to some color of your choosing now another option is to set a linear gradient the property name is background and the value is linear gradient and within the parentheses you can add two or more colors perhaps sky blue and light green that's kind of nice but unfortunately this background repeats itself once it reaches the last element so we can actually change that with another property and to change that we can set the background repeat property to a value of no repeat here's another issue now we have all of this white space after our last element so there is another property if we would like to stretch this background background attachment and the value is fixed so we can resize this window and the background will adjust dynamically we can change the direction in which the colors head so we will precede our colors with two either top bottom left or right so two top would reverse these colors so green is at the top blue is at the bottom or two left or two right pretty cool right so this time i'm going to apply these colors to the h1 header tag as well as the ptag so the background of these elements is this linear gradient but not the background of the body of our html document i'm gonna change this color from light green to white for both and with the p tag let's say two left instead okay now this is how we can set an image as our background so find an image that you like here's a picture of central park and i placed this image along with my index.html file as well as my css file so i will set the background image to a value of url you can place an external url in here but since these files are right next to each other i only have to list the file name my background dot jpg but this is probably going to be a different name for you okay so this image is gigantic i'm going to copy background repeat and background attachment and i will set the background position to center but then i would like this image to expand and shrink based on the size of the window so there's one more property that we need and that is background size and we will set this to cover okay now if i resize this window this image will resize dynamically so yeah everybody that's a little bit about backgrounds using css you can set a background color you can set the background to a linear gradient and you can even set an image as your background so yeah those are a few things you can do to change the background using css if you found this video helpful you can help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro

Channel: Bro Code

Views: 30,376

Keywords: HTML, CSS, Tutorial, How to, background images, how to put text on an image, website, HTML & CSS for beginners, HTML background image, background image

Id: YA8ZciJa64k

Length: 3min 56sec (236 seconds)

Published: Thu Sep 02 2021