JSFiddle - React, Tailwind, and code Playground
by bluey
HTML
<link rel="stylesheet" href="http://www.thepantrybromley.com/home/css/bootstrap.css">
<div class='about_div_content' style=''>
<div class='pad_10'>
<div class='title_box_main'>
<h2 class='head_pad_a head_title_style'>
ABOUT
</h2>
</div>
<div class='title_box_base'>
</div>
</div>
</div>
<div class='about_div_content' style=''>
<div class='pad_10'>
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">
<img class='pic_fillDiv pic_borderRad_10 img-responsive' src='http://www.thepantrybromley.com/home/assets/images/placeholders/pantry_front_1.jpg' />
</div>
</div>
</div>
</div>
CSS
.fw_div {
z-index: 10;
margin-left: -20px;
margin-right: -20px;
margin-top: -220px;
}
.aboutUs_bg_pic {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 500px) { /* Specific to this particular image */
.aboutUs_bg_pic {
left: -80%;
margin-left: -250px; /* 50% */
}
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.about_div_content {
position: relative;
z-index: 100;
/* background transparency */
/* default fallback */
background: rgb(255, 255, 255) transparent;
/* nice browsers */
background: rgba(60,60,60, 0.7);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-bottom: 20px;
}
.title_box_main {
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
box-shadow: 0px 1px 0px 0px #3C3C3C;
}
.title_box_base {
border-left: 2px solid #ffffff;
}
.head_pad_a {
padding-left: 10px;
}
.head_title_style {
font-weight:600;
text-shadow: 2px 2px #3C3C3C;
}
.pad_10 {
padding: 10px;
}
.pic_fillDiv {
width: 100%;
}
.pic_borderRad_10 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.cen_parent {
}
.cen_child {
}