[Ruby] Background image transparency (layering the image with your favorite colors)

less than 1 minute read

Article background

When displaying the background image in Rails, if you output it as it is, there may be strong assertion. Therefore, we will describe how to make the displayed color lighter.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647299/e8f8a8ae-9e6b-df6f-c15a-f20c99d8f7a1.png) <*After editing>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647299/3a8a19f4-3889-ed22-cd22-72b3cb6c3885.png) ### Environment | Item | Content | |:-----------------|:------------------:| | OS.Catalina | v10.15.4 | | Ruby | v2.5.1 | | Ruby On Rails | v5.2.4.3 | ### Procedure Paste the following source. #### **`test.scss`** ```scss .contents_1p{ height: 100vh; width: 100%; //rails, so put images under app/assets/images background-image: image-url('test.jpg'); //Paste white and make it transparent. This can be blue or green background-color:rgba(255,255,255,0.7); //Specify mixed mode. background-blend-mode:lighten; // additionally display the image on the whole page background-size: 100%; } ``` ### References [background-blend-mode](https://developer.mozilla.org/ja/docs/Web/CSS/background-blend-mode) [CSS that makes Background-image transparent](https://note.com/jackinriver/n/n4383898ce0c6) that's all.