Use CSS To Work With Background Images

Use CSS To Work With Background Images

In order to do this you can easily use CSS for your websites. Here is the example CSS code to apply those effects. If you play with this you can achieve your goal according to your's need.

1. Overlay the image

Apply image overlay on background image with the following concept

 .darken {  
 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(YOUR IMAGE HERE);  
 }  

Example

This is just a simple example which you can do change in according to your need.

HTML

 <div class="test">  
   <p>Beautiful image with dark overlay</p>  
 </div>  

CSS

 .test {  
   width: 500px;  
   height: 400px;  
   background-size: cover;  
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("https://download.unsplash.com/photo-1428604467652-115d9d71a7f1");  
   position: relative;  
 }  
 .test p {  
   font-size: 23px;  
   color: #fff;  
   text-transform: uppercase;  
   font-family: sans-serif;  
   position: absolute;  
   top: 160px;  
   left: 22px;  
 }  

2. Put text in a box

Apply text in a box above background image with the following concept
Note: The image fades towards black at the bottom, with white text written over it

 .text-box {  
 background-color: rgba(0, 0, 0, 0.5);  
 color: #fff;  
 display: inline;  
 padding: 10px;  
 }  

Example

This is just a simple example about text in a box

HTML

 <div class="test">  
   <p>Beautiful image with some text in a box</p>  
 </div>  

CSS

 .test {  
   width: 500px;  
   height: 400px;  
   background-size: cover;  
   position: relative;  
   background-image: url("https://download.unsplash.com/photo-1428604467652-115d9d71a7f1");  
 }  
 .test p {  
   background-color: rgba(0,0,0,0.6);  
   color: #fff;  
   display: inline;  
   padding: 10px;  
   font-size: 30px;  
   color: #fff;  
   text-transform: uppercase;  
   font-family: sans-serif;  
   width: 440px;  
   position: absolute;  
   top: 120px;  
   left: 20px;  
 }  

3. Floor fade

With this Floor fade effect you can put the text over image in the background. This effect is normally used in many latest websites. 

 .floor-fade {  
 background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(YOUR IMAGE HERE);  
 }  

Example

Here is the simple example of Floor fade effect.

HTML

 <div class="test">  
   <p>Beautiful image with floor fade</p>  
 </div>  

CSS

 .test {  
   width: 500px;  
   height: 400px;  
   background-size: cover;  
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url("https://download.unsplash.com/photo-1428604467652-115d9d71a7f1");  
   position: relative;  
 }  
 .test p {  
   font-size: 24px;  
   color: #fff;  
   text-transform: uppercase;  
   font-family: sans-serif;  
   position: absolute;  
   bottom: 10px;  
   left: 25px;  
 }