This will control how the image displays inside of the element. So the first property we'll start with is a background-repeat. ![]() So let's delete that background property. And so now that we have explored colors and gradients, let's come in here and start experimenting with background images. And these are two of the most popular editors at the time of this recording. 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. Now as you can imagine, defining CSS gradients can get rather complex, rather quickly. So now on the preview we can see we now have a radial gradient between our two colors. 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%. Then finally we'll come in here and replace repeating-linear with radial. 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. 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. So let's take a look at a couple more properties we can set for our gradient. 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. 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. So let's come in here, inside of the parentheses for linear gradient. Now we can change the direction of a gradient as well. 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. ![]() And now over here in the preview, we can see we now have a gradient. So pound sign, 0D for red, 8B for green and CD for blue. Then we'll hit a comma and specify the blue color. We'll set red to 68, we'll set green to C8 and we'll set blue to 7A. So for the first green color, type pound sign. ![]() First we'll pick a green color and then a blue color. And now, inside of the parentheses, we'll specify two colors. 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. So back in the CSS, let's come in here and change background-color to just simply background. Now with a solid color defined, let's take a look at creating a gradient. It is all the way in the background of that div element. It's also worth noting that that blue is behind the paragraph element as well. 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. So we'll type background-color, we'll use hexadecimal and let's specify 0D for red, 8B for green and CD for blue. Let's come in here and add a few returns, and let's first start by simply changing the background color. Again, that's this outer box here, that's got a slight gray border defined right here. 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. 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. 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. Now to preview this, you can open the index.html file up in a browser. 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. These properties will provide you with a wide range of design options for your webpage. Even if some of the image gets cropped as a result. 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. In addition to solid colors and gradients, we can also add images, and even control how those images fill the available space. Now there are quite a few CSS properties that we can assign to the background of an HTML element. Hi, this is Chris Converse, and in this episode, we'll be exploring some background properties in CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |