Fun with Backgrounds

Something I really enjoy about projects like this is that I get the opportunity to learn new stuff. I don’t do a whole lot of front-end work (anymore) so I don’t often get chances to experiment nor have a reason to dive into the topics.

So a cool thing I learned about while experimenting with some full-width feature callouts is the background: linear-gradient property. Here’s what it looks like altogether – I’ll dive into the specifics in a moment.

You’l need to view this at 800px minimum width only because I don’t have all of the responsive stylings imported into this page because that would be a bit too complicated for this. Here is an 800px wide rule. Get your browser to be wide enough where the whole thing shows up. It looks best at 1000px because then there’s no cropping.

Syntax

Read up more about the formal definitions of it on MDN and informally on CSSTricks. The simplest kind of gradient would be:

  background: linear-gradient(red, orange);

which would give you:

I’m not going to do tutorial content about this, to explain it, but there’s an ample amount of explanation at those two prior links.

The background I use in the example above has two components:

• the linear gradient
• a background texture

One cool thing I learned is that you can combine the gradient with a background image! So I took a textured background of random in-game “stuff” (literally what it’s called in the game), reduced the opacity to around 10%, used Photoshop Distort -> Shear to wrap it twice and make it tile more easily. The result looks like this:

And the linear-gradient is one I lifted from some of the existing art:

But then when combined like this:

background:
  url({...}tile-bg-by-tony-from-oddgobgames.png),
  linear-gradient(180deg, transparent 0%, #32cc80 55%, #2230a1 80%, black 100%);

Cool!

Blur effect

The text is a little harder to read on that background, so I also use the backdrop-filter property:

backdrop-filter: blur(10px) brightness(110%);

I just wanted this on an overlay of the <p> tag that contains the copy, not on the whole thing, so the style is applied to just the p element selector:

section {
  background:
    url(/assets/img/post_images/2024-01-10-tile-bg-by-tony-from-oddgobgames.png),
    linear-gradient(180deg,
                    transparent 0%,
                    #32cc80 55%,
                    #2230a1 80%,
                    black 100%
                   ) no-repeat;
  background-position: top center;
}
section article p {
  backdrop-filter: blur(10px) brightness(110%);
  padding: 2rem;
}

Which then gives us this, altogether:

Considerably more readable!

align-self: stretch & background-size: cover

This was another neat find. I wanted the raccoon image to be looking to the left, at the feature copy, but I needed it to hold firm in its position. (It only does that so-so on this demo, because I didn’t bring over all the responsive styles, but you can see how it behaves on the live site).

The two properties I needed here were align-self: stretch and background-size: cover.

The latter is one of several tricks we can do with background images. According to MDN, cover indicates:

Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally.

This perfectly fit the bill for what I needed there.

Here is what it looks like with background-size: contain; background-position: bottom right; instead. (resize your browser width and compare it to the behavior above). This isn’t terrible but it creates more space than I like when the viewport is wide. It also makes it really tall in narrow viewports.

Parallax scrolling

This is a thing I discovered by accident. The background-attachment: fixed property will hold the background in place and pan the content over it. This is really noticeable with a color-gradient background:

But it looks really, really cool with a space background (removing most foreground elements and making it extra tall to really see):

It almost looks like it’s a porthole into space or something.

In fact….

Scroll past it, up and down, a few times, and watch the background.