diff --git a/project/examples/css/ex6.css b/project/examples/css/ex6.css index 269e9dd..07750a8 100644 --- a/project/examples/css/ex6.css +++ b/project/examples/css/ex6.css @@ -50,9 +50,10 @@ nav a { } /* HOME PAGE STYLES ------------------------------------------*/ +-----------------------------------------*/ .home { - background: url(../images/background-6.jpg) no-repeat 50%; + background: url(../images/background-6.jpg); + background-position: center center; background-size: cover; } diff --git a/project/examples/css/ex7.css b/project/examples/css/ex7.css index 206f89b..7b29337 100644 --- a/project/examples/css/ex7.css +++ b/project/examples/css/ex7.css @@ -50,9 +50,10 @@ nav a { } /* HOME PAGE STYLES ------------------------------------------*/ +-----------------------------------------*/ .home { - background: url(../images/background-6.jpg) no-repeat 50%; + background: url(../images/background-6.jpg); + background-position: center center; background-size: cover; } diff --git a/project/final/css/final.css b/project/final/css/final.css index 351b284..85405d3 100644 --- a/project/final/css/final.css +++ b/project/final/css/final.css @@ -65,7 +65,8 @@ nav a { /* HOME PAGE STYLES -----------------------------------------*/ .home { - background: url(../images/background-6.jpg) no-repeat 50%; + background: url(../images/background-6.jpg); + background-position: center center; background-size: cover; } diff --git a/slides.html b/slides.html index 1919b98..257bd8f 100644 --- a/slides.html +++ b/slides.html @@ -2157,14 +2157,14 @@

Web Developer + City Girl

``` /* shorthand */ .home { - background: url(../images/background-6.jpg) no-repeat 50%; + background: url(../images/background-6.jpg) no-repeat center center; } /* longhand */ .home { background-image: url(../images/background-6.jpg); background-repeat: no-repeat; - background-position: 50%; + background-position: center center; } ``` @@ -2193,7 +2193,7 @@

Web Developer + City Girl

.home { background-image: url(../images/background-6.jpg); background-repeat: no-repeat; - background-position: 50%; + background-position: center center; background-size: cover; } ``` @@ -2201,7 +2201,7 @@

Web Developer + City Girl

To include it using the shorthand property, there's a quirk. It _must_ be included after `background-position`, separated with the `/` character. ``` .home { - background: url(../images/background-6.jpg) no-repeat 50% / cover; + background: url(../images/background-6.jpg) no-repeat center center/ cover; } ``` @@ -2232,7 +2232,8 @@

Web Developer + City Girl

``` .home { - background: url(../images/background-6.jpg) no-repeat; + background: url(../images/background-6.jpg); + background-size: center center; background-size: cover; } ```