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;
}
