Merge branch 'convert-trans-bg-to-css' into 'master'

Convert image diff background image to CSS

## What does this MR do?
Replaces the `trans_bg.gif` image used for image diff background image with a CSS implementation of the same background image

## Are there points in the code the reviewer needs to double check?
None

## Why was this MR needed?
Uses CSS to replace the use of an image so that webpage rendering is slightly improved

## What are the relevant issue numbers?
Closes #20500 

## Screenshots (if relevant)
Before:
![Screen_Shot_2016-08-01_at_12.29.10_PM](/uploads/8269877c561c29e6b0ca988079ff3fc6/Screen_Shot_2016-08-01_at_12.29.10_PM.png)

After:
![Screen_Shot_2016-08-01_at_12.29.16_PM](/uploads/cc88848b9c0e044445d19b889fd79271/Screen_Shot_2016-08-01_at_12.29.16_PM.png)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !5598

2 files changed, 4 insertions, 1 deletions

diff --git a/app/assets/images/trans_bg.gif b/app/assets/images/trans_bg.gif
deleted file mode 100644
index 1a1c9c15ec7..00000000000
--- a/app/assets/images/trans_bg.gif
+++ /dev/null
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 21b1c223c88..21cee2e3a70 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -164,7 +164,10 @@
       line-height: 0;
       img {
         border: 1px solid #fff;
-        background: image-url('trans_bg.gif');
+        background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5 100%),
+        linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5 100%);
+        background-size: 10px 10px;
+        background-position: 0 0, 5px 5px;
         max-width: 100%;
       }
       &.deleted {