Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Changing Bootstrap template background color to transparent background image Reply To: Changing Bootstrap template background color to transparent background image

#264027
Elliejoshi
Participant

markup

Scotch Scotch Scotch

CSS

.my-container {
position: relative;
background: #5C97FF;
overflow: hidden;
}
/* You could use :after – it doesn’t really matter */
.my-container:before {
content: ‘ ‘;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url(‘http://placekitten.com/1500/1000’);
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}

Thanks
Ellies Joshi
http://webchromite.com/