From the course: CSS Shorts

Give me some background - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Give me some background

“

- [Chris] Hi, this is Chris Converse, and in this episode, we'll be exploring some background properties in CSS. Now there are quite a few CSS properties that we can assign to the background of an HTML element. In addition to solid colors and gradients, we can also add images, and even control how those images fill the available space. By using repeat properties or scaling options, we can proportionally resize an image to either fit within the available space or scale the image large enough to fill the entire element. Even if some of the image gets cropped as a result. These properties will provide you with a wide range of design options for your webpage. Now if you'd like to follow along, download the exercise files, and I'll start by opening the index.html file in a text editor. Now to preview this, you can open the index.html file up in a browser. My particular text editor has a built-in preview, so I'll use that, and all we have here is a simple div element defined over here, with an ID of container and then just a simple paragraph element inside of here. And now to begin styling the background element of the div, with an ID of container, let's go back to the exercise files and let's open up style.css. And so with the CSS file opened, let's come down here and let's find the rule that targets the pound sign, which is an ID, container. Again, that's this outer box here, that's got a slight gray border defined right here. Let's come in here and add a few returns, and let's first start by simply changing the background color. So we'll type background-color, we'll use hexadecimal and let's specify 0D for red, 8B for green and CD for blue. Now over here in the preview, we can see that the entire background area of that div with an ID of container is now showing up in that color blue. It's also worth noting that that blue is behind the paragraph element as well. It is all the way in the background of that div element. Now with a solid color defined, let's take a look at creating a gradient. So back in the CSS, let's come in here and change background-color to just simply background. Next, let's get rid of the color and what we're going to do is we're going to type linear-gradient, then we'll put a beginning and ending parenthesis, keep the semicolon that we had from before. And now, inside of the parentheses, we'll specify two colors. First we'll pick a green color and then a blue color. So for the first green color, type pound sign. We'll set red to 68, we'll set green to C8 and we'll set blue to 7A. Then we'll hit a comma and specify the blue color. So pound sign, 0D for red, 8B for green and CD for blue. And now over here in the preview, we can see we now have a gradient. By default the gradient starts at the 0,0 corner, which is the top left area here, and it goes all the way down to the full height of the y-axis. Now we can change the direction of a gradient as well. So let's come in here, inside of the parentheses for linear gradient. Let's hit a comma, at the beginning before the first color and then before the comma, we'll type to space bottom space right. And now what we'll see in the preview is the color starts from the upper left-hand corner and goes all the way to the bottom right corner. So let's take a look at a couple more properties we can set for our gradient. So first, after the second color blue, let's hit a space, we'll type in 10%, and what we'll see in the preview is that the blue starts at 10% of the way from the top left to bottom right. And now before linear-gradient, let's come in here and type in the word repeating and then add a dash and this will actually repeat the gradient all the way across the entire element. Then finally we'll come in here and replace repeating-linear with radial. Let's come in and remove the to bottom right and the comma and then let's come in here and change the 10% to 70%. So now on the preview we can see we now have a radial gradient between our two colors. Now as you can imagine, defining CSS gradients can get rather complex, rather quickly. Now there are many online tools that you can find that will help you to define your CSS gradients with a visual editor, right in the browser, and then you can simply copy and paste out your CSS properties. And these are two of the most popular editors at the time of this recording. And so now that we have explored colors and gradients, let's come in here and start experimenting with background images. So let's delete that background property. So the first property we'll start with is a background-repeat. This will control how the image displays inside of the element. And so to begin, we're just going to simply set this to a no-repeat. Next line we're going to set background-image, then we'll type in url, put in our parentheses and a semicolon. Inside of the parentheses we can point to an image. So I'll point to one of the graphics we have inside of the media folder, so we'll type media/clovers.jpg. Now as soon as I do that, we'll see that the graphic now shows up in that background element. It aligns to the upper left-hand corner and since in this particular view, based on the width of the browser, the image is not as wide as the background element, so we'll see that negative space here. Next property we're going to set, this can be background-position. So the first property after position is going to be the X property. So let's set this to 50%. Then a space, and for the Y value we're going to set 50% as well, so that will put the image right in the middle of that HTML element. So again, if I come over here and resize the browser, we'll see that that will position, both on the horizontal and vertical axis, inside that area. Let's add another property. Let's add background-size. This allows us to scale the size of this image. Now we will set this to tile, but I want the individual tiles to be a lot smaller. Now the original image of the clovers, is 500 pixels by 246, so I want to use a much smaller value. So the first value is the X size. We'll set this to 350 pixels and then we'll set the Y size to 172 pixels. So again, that makes that much smaller. And now to see this tile the entire area, let's come up and change background-repeat to repeat, and so now we have this seamlessly tiling background, filling the entire area. So at this point let's come in here and let's change the clovers file to louvre. So louvre.jpg. Let's come back up to the repeat and let's set this back to no-repeat. Next, let's change the background-position. We'll keep 50% on the X, so it centers, but for the Y position, let's set this to bottom. And this will set the bottom of the jpeg file to align to the bottom of the HTML element. And then for background-size, let's take a look at two different properties. Now if we set these values to a percentage, the sizing wouldn't be based on the percent of the graphic, but the percentage value would be calculated based on the size of the HTML element. But what we going to do here is set some dynamic proportional scaling. So first we're going to use contain. So for background-size we'll choose contain, and what this will do is scale the background image until either the height of the image matches the height of the element or the width of the image matches the width of the element. But in either case, the image will scale as large as possible without being cropped and leave additional space, either horizontally or vertically, depending on how much room is available in the element. And then finally, let's come in here and change contain to cover. So what cover is going to do is scale the image, horizontally or vertically, so that the image will fill the entire HTML element, and this can result in your image being cropped, as its scaled to fill the entire element. So at this point, I have the image placed in the background the way I like it. One final detail, let's come down to the container space p, we're going to target the paragraph element, which is the caption here. And let's change some styles here. Let's make the color white and let's set the background-color of the paragraph element to a semi-transparent black. So to set the type color, we'll type color, pound sign and three F's to make it white. Then I want to come in here and set background-color. We use the RGBA colorspace and then inside here, we'll set zero for red, zero for green, zero for blue, and then .6 for the alpha setting. Now one other thing you might be interested in is to assign a background image to the entire background of the web page. And so what we're going to do is we're going to take our background properties, move them off the container and add them to the body element. So to do that in our CSS, let's come in here and simply select the background-repeat, image, position, and size. Let's cut these to the clipboard. Let's come in here and temporarily set the display type of the container to none. Let's come up to body, let's hit a return. Let's paste all those properties in here. At the top of the body element, I'm going to come in here and set a margin of zero. And now because the body element behaves a little differently than other elements. Because the body element and the head element exist inside of the HTML element for the entire document, we will need to set the height of the HTML element itself. So let's come in here and add a rule to target the HTML element of the entire document, and let's set a height here to 100%. The HTML element will not reach a hundred percent of the height of the browser window unless we have enough content. Now with those few changes, we have a background graphic that will now fill the entire viewport area inside the browser. And with that we've explored quite a few options for working with backgrounds. Now if you'd like to learn to create your own seamlessly tiling graphics, check out our course entitled Creating a Repeating Background in Photoshop, and if you'd like to build on these background techniques to create responsive images for your web page, check out chapter two of our course on Creating a Responsive Web Design. Both are available here in the library. And now that concludes our brief look at Working with Background Properties in CSS. And, as always, thanks for watching.

Contents