Bootstrap Snippet Full Background Image with Caption using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
 
    <div class="bg-img">
      <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/08/b5/33/08b533f6a3142b797b44c0d046c9c8cf--arabian-decor-moroccan-interiors.jpg">
      <div class="caption-left padding margin rose" style="border-radius: 15px; opacity: 0.8">
        <h1 class="text-white">ALPHAD</h1>
        <h1 class="text-white hidden-xs"><b>WEB DESIGNER</b></h1>
      </div>
      <div class="caption-bottomleft leftbar border-red margin">
        <h4 class="text-white">ALPHAD</h4>
      </div>
      <div class="caption-topright margin text-right">
        <h5 class="text-white">SYRIA <span class="glyphicon glyphicon-map-marker text-red"></span></h5>
        <p class="text-white">SYRIA - damascus 2017</p>
      </div>
      <div class="caption-topleft margin">
        <h5 class="text-white"><span class="glyphicon glyphicon-cog"></span></h5>
      </div>
      <div class="caption-bottomright margin large text-white">
        <span class="glyphicon glyphicon-heart text-red-hover"></span>
        <span class="glyphicon glyphicon-circle-arrow-down"></span>
      </div>
      <div class="caption-topmiddle margin large text-white">
        <p>.caption-topmiddle</p>
      </div>
      <div class="caption-right margin large text-white">
        <p>.caption-right</p>
      </div>
      <div class="caption-bottommiddle margin large text-white">
        <p>.caption-bottommiddle</p>
      </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/*bg image caption*/
.bg-img{position:relative}
.caption-topleft{position:absolute;left:0;top:0}
.caption-topright{position:absolute;right:0;top:0}
.caption-bottomleft{position:absolute;left:0;bottom:0}
.caption-bottomright{position:absolute;right:0;bottom:0}
.caption-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.caption-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.caption-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.caption-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.caption-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
/*style the demo*/
img{width:100%;height:auto;}
/*bg color*/
.rose{color:#fff!important;background-color:#EC87C0!important}
/*text*/
.text-white,.text-white-hover:hover{color:#fff!important;}
.text-black,.text-black-hover:hover{color:#000!important}
.text-grey,.text-grey-hover:hover{color:#757575!important}
.text-red,.text-red-hover:hover{color:#f44336!important}
.large{font-size:20px!important}
.text-right{text-align:right!important}
/*margin and padding*/
.margin{margin:16px!important;}
.padding{padding:12px 16px!important}
/*border*/
.leftbar{border-left:6px solid #ccc!important; padding-left: 5px}
.border-red{border-color:#f44336!important}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Full Background Image with Caption"
Bootstrap 3.3.0 Snippet by shu3aybbadran

Related: See More

Questions / Comments:

"Full Background Image with Caption" Bootstrap 3.3.0 Snippet by shu3aybbadran

Related: See More

Questions / Comments:

"Full Background Image with Caption"
Bootstrap 3.3.0 Snippet by shu3aybbadran