Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
CSS enables you to control the look and layout of a web page much more precisely than you could with HTML alone, but it can be time-consuming to learn. In this workshop, expert developer Candyce Mairs makes styling a quick and easy process, walking you through the process of adding content to a web page and using CSS to position that content. Candyce explains CSS positioning concepts like the CSS box model, floats, and clears and demonstrates how HTML and CSS work together to create the look of your web page. By speaking the same language as the browser, you can learn to work with the browser to place content accurately and easily.
I want to talk about the difference between foreground and background images, especially when dealing with CSS positioning, because you can do some interesting things using background images instead of foreground images. Right now, I have my header.html page open, and we're looking at the code view. All I have on this page is a header div, and inside that div, I have a single image, and CoffeeCup does have a way to display a split screen.
If you look in the View menu. In case you're using Coffee Cup. You can click on Split Screen Preview and it will preview the page down here. And I'll use this just to show you what the page looks like, basically in the browser. To save some time. Now if you're using any other type of editor. Go ahead and use whatever that editor has to offer. You don't have to use coffee cup in order to go through this course. But if you are I want to point out a few features of coffee cup as an editor.
So this page just has a single header image. And it's an actual image. I added, onto the webpage. But I've actually created another page. To show you what I'm talking about. In terms of foreground. Versus background images. So this one is a foreground image. If I open up foreground.html And go up to this page. I have this page all set up. So lets take a look at it in the browser. And I'll go out to Firefox again.
You're probably beginning to notice a pattern here. It helps me show you code in the actual page at the same time. So what do I have on this page? Well right now I have a single DIV at the top of the page with no ID assigned to it. It's just a DIV tag. And inside of that, I have an image. And that is the first image you're looking at. So it's exactly the same as that header page which we just looked at within Coffee Cup. This one just doesn't have an id assigned.
Notice my second div tag here, does not have any type of an image tag within it, but it's displaying an image identical to the one above it, so it looks like there are actually two images sitting on this page Well, you can do some interesting things using a background image, such as this second div. A foreground image takes up space within the webpage itself.
So if I go to add text, by default, the text would either move over or down below my image. It could not take up the same space as my image. If I have a background image, what I can do is have that image showing at the same time, and I can literally add text within this area. So if I go out to coffee cup and let's go ahead and do this. I want you to see it in the actual page code instead of doing it in Firebug and playing around with it there. So I'm going to say this is the background image that I can place text onto.
So between the div tags, instead of a image tag taking up that space, I can put text. I'll save that page and put it back into the browser. Now let's take a look at what happened to the text. Notice my text is sitting here right on top of the image. I could not get that same effect with this image sitting on the page. What this does is allow you to segregate the image, and basically place it onto the page, so you can place other content on top.
And what's cool about this feature is I can place the text on top of my image. This text will get read by a search engine. Any text I might put into this image up above. That would have to become a part of the image. And that text would not show up for a search engine. So you can do some interesting things using background images instead of foreground images. And adding a background image as a property is simply taking whatever selector, whatever piece of the page you want to add it to, and you put background image: and then here's the code to add to the background image. You need to make sure to put the correct path to the image in here just like you put the correct path in your image tag.
There is another property called background repeat and what that does is prevent this image from repeating multiple times across the page. If I didn't put that and the div tag took up a fair amount of space, I would see this image over and over again. So, those are the background properties for a particular DIV tag, and you can use those instead of actually having the image on the page itself. I wanted to give you a nice example page.
So this foreground dot HTML page can be used, and you can play around with adding different images, and different pieces of text or content on top of that image to get a better idea of the background image piece, and how you can use it within your page. The page for this course will not be using that type of thing until we get to the footer area. So, within the footer area I will be adding a background image. Just like I did here.
So this is just introducing the concept of working with a foreground image versus a background image. That is how you can work with images within your webpages and your CSS to position them and actually be able to add content on top of them.
There are currently no FAQs about Exploring CSS Positioning.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.