Image Backgrounds

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="max-width:1000px; border: solid 7px white; box-sizing: border-box; overflow: hidden; position: absolute; height: 405px;">
<div style="max-width: inherit; margin:-10px;">[[File:Night\_sky\_2.jpg|center|link=|1000px]]</div></div>
<div style="max-width: inherit; padding: 20px; color: white;font-weight: bold; font-size: 25px; position: relative; text-align: center;font-family:Cursive;"><span style="font-weight:bold;">Text Goes Here</span></div>

**See Also:**

* Help:Adding Images
* Image Modification
* Imagemaps

## Introduction

This guide teaches how to put a image or GIF background in your coding, as well as customizing more coding with it!

## Instructions

**Step 1:** Add a file at the top of your coding, like this (for more info, go to Image Modification):

```
[[File:Night_sky_2.jpg]]
```

The image looks like:

**Step 2:** Add the coding:

```
<div style="max-width: 600px; border: solid 7px white; box-sizing: border-box; overflow: hidden; position: absolute; height: 340px;">
<div style="max-width: inherit; margin:-10px;">[[File:Night_sky_2.jpg|center|link=|600px]]</div></div>
<div style="max-width: inherit; padding: 20px; color: white; font-weight: bold; font-size: 25px; position: relative;">Text Goes Here</div>

```

**Step 3:** The coding you have so far should result in something like this (click on the result box to open, click again to close):

RESULT

Text Goes Here

## Rounded the Image

Round the **Image Backgrounds** corner by using Border Radius.

## Example

The coding

```
<div style="max-width: 600px; border: solid 7px white; box-sizing: border-box; overflow: hidden; border-radius: 20px; position: absolute; height: 340px;">
<div style="max-width: inherit; margin:-10px;">[[File:Night_sky_2.jpg|center|link=|600px]]</div></div>
<div style="max-width: inherit; padding: 20px; color: white; font-weight: bold; font-size: 25px; position: relative;">Text Goes Here</div>

```

RESULT

Text Goes Here

## Customizing

### **Margin**

When you look at the coding, you'll notice a "box-sizing:" and different elements following that. You can adjust the height, width, position, overflow, and etcetera. The margin, when put simply, controls how high and low the text is. The lower the margin is, for example,

```
margin: -200px auto 0 auto;

```

Would make the text lower. A higher margin, for example,

```
margin: -100px auto 0 auto;

```

Would make the text go higher.

### **Text shadow**

As shown in this page, you can add text shadow to your coding by adding:

```
text-shadow: _ px _ px _ px *color*;

```

to your code.

In \_ px \_ px \_ px, you type the numbers, for example:

```
text-shadow: 0px 0px 12px black;

```

as described in the text shadow page.

In \*color\*, you type the name of the color of the text shadow you want.

### **Adding more**

To add more attributes, visit the Attributes page and continue adding more attributes in the same way as shown above. By doing this, you can get Fonts, Text Color, Text Size, Backgrounds, Padding, and a whole lot more!