From 5edff913c30f37de719131abe958c5f61f437fd2 Mon Sep 17 00:00:00 2001 From: Tyler Clarke Date: Thu, 12 Feb 2026 09:01:04 -0500 Subject: [PATCH] week 6 --- site/introwebdev/index.html | 3 + site/introwebdev/week-6-backgrounds.html | 106 +++++++++++++++++++++++ site/introwebdev/week-6-homework.html | 71 +++++++++++++++ 3 files changed, 180 insertions(+) create mode 100644 site/introwebdev/week-6-backgrounds.html create mode 100644 site/introwebdev/week-6-homework.html diff --git a/site/introwebdev/index.html b/site/introwebdev/index.html index 213cd26..1e5f41f 100644 --- a/site/introwebdev/index.html +++ b/site/introwebdev/index.html @@ -52,6 +52,8 @@ TBD. Will post an announcement when this is worked out.
  • Week 2 Homework
  • Week 3 Homework (due on January 30th)
  • Week 4 Homework (due on February 6th)
    • +
  • No week 5 homework!
    • +
  • Week 6 Homework (due on February 20th)

    • Lecture notes

    @@ -62,6 +64,7 @@ I'll be posting these in advance of lectures, so you can review the material bef

  • Week 2: Doctypes, The HTML, Head, and Body tags, Metadata, Web Inspector
  • Week 3: Github Pages Intro, Internet Safety, Linked Styles
  • Week 4: Style, ID and Class, The Div Tag
    • +
  • Week 6: Backgrounds

    • Generative AI policy

    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. +

    +

    Background Size

    +

    +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. +

    +

    Background Repeat

    +

    +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: +

    +
    +

    Background Position

    +

    +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. +

    +

    Better Styles

    +

    +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. +

    +[/] +[#template.html] diff --git a/site/introwebdev/week-6-homework.html b/site/introwebdev/week-6-homework.html new file mode 100644 index 0000000..346b820 --- /dev/null +++ b/site/introwebdev/week-6-homework.html @@ -0,0 +1,71 @@ +[!] +[=title "Week 6 Homework"] +[=content-] +

    +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. +

    +

    Part 1: Space Age

    +

    +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.) +

    +

    Part 2: Planetarium

    +

    +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! +

    +

    Part 3: Words

    +

    +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! +

    +

    Extra Credit

    +

    +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!). +

    +

    Self-Study

    +

    +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. +

    +

    Submission

    +

    +Upload your page to your Github site and e-mail me the link, no later than February 20th. +

    +[/] +[#template.html]