Background Size

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard <div style="background:\_\_;background-size:\_px \_px;">CONTENT</div>

## Introduction

**Background Size** is an HTML, CSS, and WikiText attribute that is used mainly to make repeating backgrounds, also known as patterns.

## Instructions

To use background-size, add the following:

```
<div style="background:__;background-size:_px _px;">CONTENT</div>
```

Fill in the first blank with a color gradient, as according to the gradient background section in Backgrounds. Fill in the **\_px** with a number of your choosing. This will be how large the background is.

## Examples

Radial-gradient:

TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well!

The code for this:

```
<div style="background:radial-gradient(#ff7f7f, #ffb347, #f0eb71, #90ee90, #ADD8E6, #B19CD9);background-size:70px 70px;">CONTENT</div>
```

Linear-gradient:

Test! This is a linear-gradient repeat. I will write several test messages so you can really see the repeat.
Cats are fantastic. Cats are spectacular. Cats are terrific. Cats are amazing. Cats are awesome. Cats are cute. Cats are playful. Cats are fabulous. Cats are adorable. Cats are life. Cats are fantastic. Cats are spectacular. Cats are terrific. Cats are amazing. Cats are awesome. Cats are cute. Cats are playful. Cats are fabulous. Cats are adorable. Cats are life. Cats are fantastic. Cats are spectacular. Cats are terrific. Cats are amazing. Cats are awesome. Cats are cute. Cats are playful. Cats are fabulous. Cats are adorable. Cats are life.

Cool, huh?

The code for this:

```
<div style="background:linear-gradient(to top right, lightpink, pink, hotpink, deeppink, violet, blueviolet);background-size:60px 90px;">CONTENT</div>
```

Conic-gradient:

TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well!

The code for this:

```
<div style="background:conic-gradient(#8A2BE2, #00BFFF, #00FF00, #FFC000, #FFAE42, #fa2a55); background-size:8.33% 20%">CONTENT</div>
```

## Examples

Radial-gradient:

TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well!

The code for this:

```
<div style="background:radial-gradient(#ff7f7f, #ffb347, #f0eb71, #90ee90, #ADD8E6, #B19CD9); opacity: 75%; background-size:70px 70px;">CONTENT</div>
```

Linear-gradient:

Test! This is a linear gradient repeat. I will write several test messages so you can really see the repeat.
Cats are fantastic. Cats are spectacular. Cats are terrific. Cats are amazing. Cats are awesome. Cats are cute. Cats are playful. Cats are fabulous. Cats are adorable. Cats are life. Cats are fantastic. Cats are spectacular. Cats are terrific. Cats are amazing. Cats are awesome. Cats are cute. Cats are playful. Cats are fabulous. Cats are adorable. Cats are life. Cats are fantastic. Cats are spectacular. Cats are terrific. Cats are amazing. Cats are awesome. Cats are cute. Cats are playful. Cats are fabulous. Cats are adorable. Cats are life.

Cool, huh?

The code for this:

```
<div style="background:linear-gradient(to top right, lightpink, pink, hotpink, deeppink, violet, blueviolet); opacity: 75%; background-size:60px 90px;">CONTENT</div>
```

Conic-gradient:

TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well! TEST! We have to make this multiple lines so you can really see the repeat, so this message will repeat as well!

The code for this:

```
<div style="background:conic-gradient(#8A2BE2, #00BFFF, #00FF00, #FFC000, #FFAE42, #fa2a55); opacity: 75%; background-size:8.33% 20%;">CONTENT</div>
```

## References

* For more patterns design examples, see this website CCS Patterns at Heliosanctus wiki.

1. ↑ You don't have to use color gradients, but if you don't, you won't be able to see the repeat