Files
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md
Oliver Eyton-Williams 0bd52f8bd1 Feat: add new Markdown parser (#39800)
and change all the challenges to new `md` format.
2020-11-27 10:02:05 -08:00

1.2 KiB

id, title, challengeType, videoUrl, forumTopicId
id title challengeType videoUrl forumTopicId
587d78a5367417b2b2512ad8 Create Texture by Adding a Subtle Pattern as a Background Image 0 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.

--hints--

Your body element should have a background property set to a url() with the given link.

assert(
  code.match(
    /background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
  )
);

--seed--

--seed-contents--

<style>
  body {

  }
</style>

--solutions--

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