Skip to content

Commit f72d2e8

Browse files
christinatruongchristinatruong
committed
revised background images slides & examples
1 parent 859158f commit f72d2e8

File tree

4 files changed

+247
-94
lines changed

4 files changed

+247
-94
lines changed

‎framework/img/workshop/homepage-norepeat.png

1.46 MB
Loading

‎index.html

Lines changed: 89 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1652,6 +1652,94 @@ <h2>Class Exercise - Positioning the Header &amp; Nav</h2>
16521652
Let's finish the day with background images and forms!
16531653
</section>
16541654

1655+
<section class="slide" data-markdown>
1656+
##Class Exercise: Background Images
1657+
1658+
So far, we've used `background` to add colours. We can also use it to add images. We've added images in the HTML using `img` but we can also set images as a background style using CSS.
1659+
1660+
```
1661+
background-image: url(path/to/file.jpg); /* longhand */
1662+
background: url(path/to/file.jpg);/* shorthand */
1663+
```
1664+
Since our CSS file is *inside* a folder, use `../` to go *up and out* of the folder to get to the image files. Let's add it to **index.html**. Create a `.home` declaration block so this image only displays on the homepage and spans the entire page. (There are a few to choose from in your images folder.)
1665+
1666+
```
1667+
.home {
1668+
background: url(../images/background-6.jpg);
1669+
}
1670+
```
1671+
1672+
Notice how the images repeat (unless you have a really large image). We can change that with another property, `background-repeat` or just add it to the shorthand `background` property.
1673+
1674+
```
1675+
/* shorthand */
1676+
.home {
1677+
background: url(../images/background-6.jpg) no-repeat;
1678+
}
1679+
1680+
/* longhand */
1681+
.home {
1682+
background-image: url(../images/background-6.jpg);
1683+
background-repeat: no-repeat;
1684+
}
1685+
```
1686+
</section>
1687+
<section class="slide" data-markdown>
1688+
##Background images (continued)
1689+
1690+
The image is no longer repeating but it doesn't fit the space either. Your page should look similar to the below (unless your image is larger than your resolution). We'll need to add one more property to fix this.
1691+
1692+
![homepage background](framework/img/workshop/homepage-norepeat.png)
1693+
</section>
1694+
1695+
<section class="slide">
1696+
<h2>Class exercise: Background-size</h2>
1697+
1698+
<p>Thanks to CSS3, we can now change the size of a background image. </p>
1699+
<p><code>background-size</code> is the longhand property. To include it in the shorthand <code>background</code> property, it <em>must</em> be included after <code>background-position</code>, separated with the <code>/</code> character. </p>
1700+
<pre><code>.home {
1701+
background-image: url(../images/background-6.jpg);
1702+
background-repeat: no-repeat;
1703+
background-position: 50%;
1704+
background-size: cover;
1705+
}</code></pre>
1706+
1707+
<pre><code>.home {
1708+
background: url(../images/background-6.jpg) no-repeat 50% / cover;
1709+
}</code></pre>
1710+
<p>If no background position value is being used, background-size won’t work in the shorthand property so in this case, it may be less error prone to add it via the longhand property.</p>
1711+
<pre><code>.home {
1712+
background: url(../images/background-6.jpg) no-repeat 50%;
1713+
background-size: cover;
1714+
}
1715+
</code></pre>
1716+
1717+
<p>For good measure, since this image is a background image of the <code>body</code>, let's add one more rule to ensure the image covers the whole viewport and not just the height of the page content.</p>
1718+
<pre><code>html, body {
1719+
height: 100%;
1720+
}
1721+
</code></pre>
1722+
<p><strong>Extra resources about background:</strong> <br>
1723+
<a href="http://jsfiddle.net/zyjtde73/1/">http://jsfiddle.net/zyjtde73/1/</a><br>
1724+
<a href="http://www.css3.info/preview/background-size/">More about background-size</a></p>
1725+
1726+
<p>Here are some resources for free images:</p>
1727+
1728+
<ul>
1729+
<li><a href="http://superfamous.com/">http://superfamous.com/</a></li>
1730+
<li><a href="http://www.gratisography.com/">http://www.gratisography.com/</a></li>
1731+
<li><a href="http://littlevisuals.co/">http://littlevisuals.co/</a></li>
1732+
<li><a href="http://nos.twnsnd.co/">http://nos.twnsnd.co/</a></li>
1733+
<li><a href="http://unsplash.com/">http://unsplash.com/</a></li>
1734+
</ul>
1735+
1736+
<p>Your page should now look similar to <a href="project/examples/exercise8-home.html">example 8</a>.</p>
1737+
1738+
<div class="presenter-notes">
1739+
<p>You will probably be pressed for time at this point. Just explain what "cover" does and let them know there are other options available and there are additional resources at the bottom of this slide.</p>
1740+
</div>
1741+
</section>
1742+
16551743
<section class="slide" data-markdown>
16561744
##Forms: organizing the interface
16571745

@@ -1720,100 +1808,7 @@ <h2>Class Exercise - Positioning the Header &amp; Nav</h2>
17201808

17211809
Your contact page and form should look similar to [Example 9](project/examples/exercise9-contact.html).
17221810
</section>
1723-
<section class="slide" data-markdown>
1724-
##Exercise #10 - Background Images
1725-
1726-
Before we style the contact form, let's go over how background images work. We've added images in the HTML using `img` but we can also set images as a background style using CSS.
1727-
1728-
```
1729-
background-image: url(path/to/file.jpg); /* longhand */
1730-
background: url(path/to/file.jpg);/* shorthand */
1731-
```
1732-
Since our CSS file is *inside* a folder, use `../` to go *up and out* of the folder to get to the image files. Let's add it to our Contact page. Just like the home page, add a class to the `body` tag to override or customize any styles for any element contained within the contact page.
1733-
1734-
```
1735-
&lt;body class=&quot;contact&quot;&gt;
1736-
```
1737-
1738-
```
1739-
.contact {
1740-
background: url(../images/your-image.jpg);
1741-
}
1742-
```
1743-
1744-
Note how the images repeat (unless you have a really large image). We can override that with another property, `background-repeat` or just add it to the shorthand `background` property.
1745-
1746-
```
1747-
/* shorthand */
1748-
.contact {
1749-
background: url(../images/background-1.jpg) no-repeat;
1750-
}
1751-
1752-
/* longhand */
1753-
.contact {
1754-
background-image: url(../images/background-1.jpg);
1755-
background-repeat: no-repeat;
1756-
}
1757-
```
1758-
</section>
1759-
<section class="slide" data-markdown>
1760-
##CSS3 Background-size
1761-
1762-
The image is no longer repeating but it doesn't fit the space either. Thanks to CSS3, we can now change the size of a background image!
1763-
1764-
Let's take a look at an example of the different options: http://jsfiddle.net/zyjtde73/1/
1765-
1766-
`background-size` is the longhand property. To include it in the shorthand `background` property, it *must* be included after `background-position`, separated with the `/` character.
1767-
1768-
```
1769-
.contact {
1770-
background-image: url(../images/background-1.jpg);
1771-
background-repeat: no-repeat;
1772-
background-position: 50%;
1773-
background-size: 100%;
1774-
}
1775-
```
1776-
```
1777-
.contact {
1778-
background: url(../images/background-1.jpg) no-repeat 50% / 100%;
1779-
}
1780-
```
1781-
If no background position value is being used, background-size won't work in the shorthand property so in this case, it may be less error prone to add it via the longhand property.
1782-
1783-
```
1784-
.contact {
1785-
background: url(../images/background-1.jpg) no-repeat 50%;
1786-
background-size: 100%;
1787-
}
1788-
```
1789-
</section>
1790-
1791-
<section class="slide" data-markdown>
1792-
##Exercise #10 - Background Images (continued)
1793-
1794-
1. Go back to the `.contact` CSS and add the background-size option.
1795-
1796-
```
1797-
.contact {
1798-
background: url(../images/background-8.jpg) no-repeat;
1799-
background-size: cover;
1800-
}
1801-
```
1802-
1803-
2. Add a different background image for the home page.
1804-
1805-
There are a few background images in your project folder to choose from or check out these resources for free images:
1806-
1807-
* http://superfamous.com/
1808-
* http://www.gratisography.com/
1809-
* http://littlevisuals.co/
1810-
* http://nos.twnsnd.co/
1811-
* http://unsplash.com/
1812-
1813-
1814-
Your pages should now look similar to [example 10](project/examples/exercise10-home.html).
1815-
</section>
1816-
1811+
18171812
<section class="slide">
18181813
<h2>Center aligning with margin</h2>
18191814
<p>The margin property can also be used to center align block level elements. First, a width needs to be set. Then, setting the left &amp; right values to <code>auto</code> will find the center of the page. The <code>0</code> just refers to the top and bottom value.</p>

‎project/examples/css/exercise8.css

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
/* GLOBAL STYLES
2+
-----------------------------------------*/
3+
/* apply a natural box layout model to all elements, but allowing components to change */
4+
html {
5+
box-sizing: border-box;
6+
}
7+
*, *:before, *:after {
8+
box-sizing: inherit;
9+
}
10+
11+
/* clears floated child elements */
12+
.clearfix:before,
13+
.clearfix:after {
14+
content: " ";
15+
display: table;
16+
}
17+
.clearfix:after {
18+
clear: both;
19+
}
20+
html, body {
21+
height: 100%;
22+
}
23+
body {
24+
padding: 0;
25+
margin: 0;
26+
font-family: "Open Sans", sans-serif;
27+
color: #333;
28+
}
29+
header,
30+
section {
31+
padding: 20px 30px;
32+
}
33+
section {
34+
padding-top: 125px;
35+
}
36+
37+
h1 {
38+
font-family: "Nixie One", serif;
39+
}
40+
h1, h2 {
41+
font-weight: 300;
42+
text-transform: uppercase;
43+
margin: 0;
44+
line-height: 1;
45+
}
46+
a {
47+
color: #bf6d50;
48+
text-decoration: none;
49+
}
50+
.highlight {
51+
color: #bf6d50;
52+
}
53+
54+
55+
/* HEADER
56+
-----------------------------------------*/
57+
header {
58+
background: white;
59+
border-bottom: 1px solid #eee;
60+
position: fixed;
61+
top: 0;
62+
width: 100%;
63+
}
64+
header h1 {
65+
font-size: 36px;
66+
}
67+
header h2 {
68+
font-size: 18px;
69+
}
70+
71+
72+
/* NAVIGATION MENU
73+
-----------------------------------------*/
74+
nav {
75+
position: absolute;
76+
right: 20px;
77+
top: 20px;
78+
}
79+
nav ul {
80+
list-style-type: none;
81+
margin: 0;
82+
padding: 0;
83+
}
84+
nav ul li {
85+
display: inline-block;
86+
}
87+
nav a {
88+
padding: 5px 15px;
89+
text-transform: uppercase;
90+
}
91+
92+
93+
/* HOME PAGE
94+
-----------------------------------------*/
95+
.home {
96+
background: url(../images/background-6.jpg) no-repeat;
97+
background-size: cover;
98+
}
99+
.home header {
100+
position: static;
101+
background: transparent;
102+
border-bottom: none;
103+
text-align: center;
104+
padding-top: 100px;
105+
}
106+
.home header h1 {
107+
font-size: 120px;
108+
}
109+
.home header h2 {
110+
font-size: 40px;
111+
}
112+
113+
114+
/* ABOUT PAGE
115+
-----------------------------------------*/
116+
.profile-image {
117+
float: left;
118+
width: 50%;
119+
margin-right: 20px;
120+
}
121+
.quote {
122+
clear: both;
123+
text-align: center;
124+
padding-top: 20px;
125+
}
126+
127+
128+
129+
130+

‎project/examples/exercise8-home.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Jane Smith</title>
6+
<link href='http://fonts.googleapis.com/css?family=Nixie+One|Open+Sans:300|Pacifico' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="css/exercise8.css">
8+
</head>
9+
<body class="home">
10+
11+
<nav>
12+
<ul>
13+
<li><a href="exercise7-home.html">Home</a></li>
14+
<li><a href="#">About</a></li>
15+
<li><a href="#">Contact</a></li>
16+
</ul>
17+
</nav>
18+
19+
<header>
20+
<h1><span class="highlight">Jane</span>Smith</h1>
21+
<h2>Web Developer + City Girl</h2>
22+
</header>
23+
24+
<footer>
25+
<p>&#169; 2014 by jane smith</p>
26+
</footer>
27+
</body>
28+
</html>

0 commit comments

Comments
 (0)