Craft a movie order page and practice web design and CSS styling fundamentals.

Web Page Styling—CSS

In this module, we’ll initiate a practical journey to construct a movie order page in this module. As we progress through the lessons, we’ll explore various web design and CSS styling aspects. Starting with an overview of the project and initial styling, we’ll consider planning and investigating design challenges. We’ll gain insights into some fundamental concepts related to the CSS box model and techniques for fixing UI issues. We’ll also explore background positioning in CSS, including background shorthand properties and techniques to refine our page design.

Project: Build a Movie Order Page

# Positioning Backgrounds with Keywords.
Backgrounds may be positioned with the combination of the keywords: `top`, `left`, `bottom`, `right`, and `center`

# Example 

```css

  background-position: top left
  
```
The best way to see this at work is to use the playground below: 


The following combinations are valid: 

```css

 div {
 	background-position: top left;
  background-position: top right;
  background-position: bottom left;
  background-position: bottom right;
 }
```

Change the `background-position` value to use a combination of the keywords discussed. Observe how this affects the position of the background image. 


<br/>
<br/>

# Positioning Backgrounds with Length Values.
Generally, positioning in CSS follows a coordinate system. With respect to the top of the container element, the coordinate looks like so: 

That being said, we could position the background image like so:

Where `x` and `y` represent length values e.g `14px` , `3em` ... originating from the top left corner of the container element. 

Positive length values are in the direction displayed above, and negative directions in the opposite directions.

Go ahead and try these in the playground below. Use length values to position the background image.

Not sure what to do in the playground above? 

try this:

```css
div {
	background-position: 200px 10px;
}
```

watch the bird move `200px` along the x-axis and `10px` along the y-axis.

When done with that, try these negative value combination

```css
div {
	background-position: -150px -60px;
}
```

# Positioning Backgrounds with Percentage Values.
Positioning backgrounds with percentage values act just like using length values but with a little twist.

With length values, the placement origin of the positioned background is the top left corner.

With percentages, the background isn't positioned with respect to the top left corner. It is positioned with respect  to the width or height of the image as per the percentage specified. 

I know that sounds complicated. Here's an example:

The result of `background-position: 50% 50%` is represented in the image below: 

50% into the parent container, and 50% into the child element. That's how the confluence point is reached (please refer to the graphic above)

And here is `background-position: 100% 100%` represented below:


Here is a playground to toy with setting background positions in percentages.

> **NOTE:** By default the `background-position` is set to `0% 0%` i.e if you do not set this property, it takes on this value by default

One more lesson, and we will get back to finishing off the movie project!

Backgrounds in CSS may be positioned with keywords or percentage values. Let's take a look at how it works. 

How to Position Backgrounds in CSS

Backgrounds in CSS may be positioned with keywords or percentage values. Let's take a look at how it works.

Build a movie order page

Conclusion

How to Position Backgrounds in CSS

Positioning Backgrounds with Keywords.

Example

Positioning Backgrounds with Length Values.

Positioning Backgrounds with Percentage Values.