2018-09-30 22:01:58 +00:00
---
id: 587d78a5367417b2b2512ad8
title: Create Texture by Adding a Subtle Pattern as a Background Image
challengeType: 0
videoUrl: 'https://scrimba.com/c/cQdwJC8'
2019-08-05 16:17:33 +00:00
forumTopicId: 301052
2021-01-13 02:31:00 +00:00
dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
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.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --instructions--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Using the url of `https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png` , set the `background` of the whole page with the `body` selector.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --hints--
Your `body` element should have a `background` property set to a `url()` with the given link.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert(
code.match(
/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
)
);
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
body {
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
}
< / style >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-04-28 18:13:38 +00:00
```html
< style >
body {
2019-05-20 18:28:20 +00:00
background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
2019-04-28 18:13:38 +00:00
}
< / style >
2018-09-30 22:01:58 +00:00
```