freeCodeCamp/create-texture-by-adding-a-subtle-pattern-as-a-background-image.english.md at f1c9b08cf322e4268a0a31ae9b5d75bf3cfce7d1

Oliver Eyton-Williams f1c9b08cf3 fix(curriculum): add isHidden: false to challenges

This includes certificates (where it does nothing), but does not
include any translations.

2020-05-25 16:25:19 +05:30

1.5 KiB

Raw Blame History

id, title, challengeType, isHidden, videoUrl, forumTopicId

id	title	challengeType	isHidden	videoUrl	forumTopicId
587d78a5367417b2b2512ad8	Create Texture by Adding a Subtle Pattern as a Background Image	0	false	https://scrimba.com/c/cQdwJC8	301052

Description

One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The background property supports the url() function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses.

Instructions

Using the url of https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png, set the background of the whole page with the body selector.

Tests

tests:
  - text: Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.
    testString: assert(code.match(/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi));

Challenge Seed

<style>
  body {

  }
</style>

Solution

<style>
  body {
    background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
  }
</style>

1.5 KiB Raw Blame History