@@ -62,6 +64,7 @@ I'll be posting these in advance of lectures, so you can review the material bef
diff --git a/site/introwebdev/week-6-backgrounds.html b/site/introwebdev/week-6-backgrounds.html new file mode 100644 index 0000000..84e4162 --- /dev/null +++ b/site/introwebdev/week-6-backgrounds.html @@ -0,0 +1,106 @@ +[!] +[=title "Week 6: Backgrounds"] +[=content-] +
+At this point, we've all used enough CSS to make basic layouts and pages with simple color schemes. +Now we're going to do a deep dive into one of the more complicated topics in CSS: backgrounds. +
+
+CSS provides two ways to set backgrounds: background-color and background-image. Both
+do exactly what they sound like. You set colors like background-color: red;, and you set images like background-image: url("/path/to/image.png");.
+We're going to focus on background images.
+
+By default, CSS background images are pretty unpleasant. You usually get a result like this (background-image: url('robot.png');):
+
+CSS used the most natural size for the image, and then repeated it to fill empty space.
+Like with HTML img widths, we can actually set a background size! We do this with the background-size property.
+background-size is very cool for many reasons, not least that it accepts percentages: you can set, for instance,
+background-size: 50%; and get a result like this:
+
+The image takes up 50% of the width of the element, and sets the height to whatever makes sense, so you end up with two repetitions of the image
+and the bottom is clipped. We can do better! background-size: 50% 100%; tells CSS to make each image take up half of the width and all of the height,
+and stretch if necessary:
+
+The robots got squooshed!
+If we want more complicated constraints, we can use "auto": for instance, background-size: auto 100%; produces this:
+
This sets the background's height to 100% of the element, and sets the background's width to whatever makes the most sense, +so we end up with unstretched images. +
+
+We can also use numbers in pixels just like with everything else, e.g. background-size: auto 133px;:
+
+I recommend playing around with background-sizes a bit on your own. +
+
+Repeating backgrounds can be nice to fill space, but they don't always look decent. There's another way!
+We can use the background-repeat property. This accepts a few unusual values: repeat and no-repeat
+(there are more, but they aren't common - check out MDN's article on the topic).
+
+repeat repeats the background, and no-repeat doesn't. The last size demo from above with background-repeat: no-repeat; set:
+
+We only get the one. There's no repetition! +
+
+Just like with background-size, background-repeat can be set for each axis.
+background-repeat: repeat no-repeat; will cause the image to repeat along the horizontal but not repeat on the vertical, like this:
+
+As we saw above, when no-repeat is set, we end up with an image in a weird location - the top left corner.
+Enter the background-position property! background-position is very complicated, and we won't
+be covering all of its many powers today: for now, you can use background-position: center; to center the background,
+background-position: x% y%; to put it at a percentage of the container size (just like with background-size),
+and background-position: xpx ypx; to put it at an absolute offset from the top-left in pixels.
+
+For instance, background-position: center; does this:
+
+This is clearly an improvement. What if we'd prefer it on the other side? background-position: 100% 50%; is the way to go:
+
+This literally means "100 percent of the way to the right, and 50 percent of the way down". If we prefer a position in pixels,
+we can also use that, for instance background-position: 133px 133px; yields
+
+You should usually use percentages or center.
+
+The "nicest" way to style your background is through background-size's two special values
+cover and contain. cover increases the background image's size until it fills the whole background like this:
+
+This can be used in conjunction with background-position: center; to get a pretty okay result,
+
+background-size: contain; does sorta the opposite - it sets the image's size so that the whole image is visible, like this:
+
+Note that cover will never produce a repeat, but contain can.
+
+This homework is going to be entirely about background images. +You don't need to know anything not covered in Week 6: Backgrounds, but +if you're curious or want a deeper understanding, check out MDN on the background property. +It's complicated because it's powerful! +
++I recommend doing all of this in a new page with its own CSS file. +
++Download a good space age background image (there are some nice options on freepik). +Use it to set the background image of a new page on your website. +Background image set properly. +The background image should cover the entire area, should not stretch, and should not repeat - which single CSS property will achieve that? +
++Note that Freepik is licensed - you can't just use the images. Fortunately, their "free tier" only requires you to put an attribution on your site. +Find Freepik's free-license attribution on your own, and use it correctly on your webpage. Correct attribution +
++(Note that if you use a service other than freepik it is your responsibility to handle the license correctly - I will be checking.) +
++Let's make your space page more interesting! Download some planets (Pics4Learning has them, and you don't need +to worry about P4L licensing because this is a school project). +
+
+Add a few div's to the page (with their own IDs) and give them planet backgrounds divs with planet backgrounds.
+Use padding to increase the size of the divs, and use the background properties to set the position and size
+of the planets within their divs planet backgrounds are sized and positioned.
+
+There's no required end result here, so be creative! +
++Using whatever technique you think is best, add some Lorem text to the page between some planets. +lorem text +Make sure that it's readable: +e.g. white on black or black on white, not black on black. +text is readable. +Web developers have to be aware of contrast! +
++I'll add 3 points of extra credit if you can figure out how to use linear-gradient to +set a spaceage-ey glow effect on your website, and 7 if you can +find and download a space font and correctly apply it to your text (this is hard!). +
+
+We'll be learning about fonts soon - to get a head start, read on your own about the font properties in CSS
+and the @font-face declaration.
+
+Also, read CSS-Tricks' Grids page - it's an excellent +dive into more advanced layouts. In particular, using a grid to complete +this homework is a far better solution than the intended one - I won't assign extra credit if you do so, but I will consider +it to be a fully correct solution. +
++Upload your page to your Github site and e-mail me the link, no later than February 20th. +
+[/] +[#template.html]