@charset "utf-8"; /* CSS Document */ .background-grid { background-repeat: no-repeat; background-position: center; background-size: cover; min-height: 150px; } .background-cover { background-image: url(../img/Newnotebookandtexturewoodencoverwithpencil.jpg); } .background-sec-1 { background-image: url(../img/Close-upofaveryniceyoungawardwinnercow.jpg); } .background-sec-2 { background-image: url(../img/winner.jpg); } .background-sec-3 { background-image: url(../img/Manmakingspeech.jpg); } .background-sec-4 { background-image: url(../img/Teamofvolunteerspickinguplitterinpark.jpg); } .background-sec-5 { background-image: url(../img/OldFashionWhiteChurchwithaSteeple.jpg); } .background-sec-6 { background-image: url(../img/Oldscrollpaperonwoodenbackground.jpg); } .background-sec-7 { background-image: url(../img/Prettywomanisaproffessionalphotographerwithdslrcamera.jpg); } .float-left { float: left; } .float-right { float: right; } /*From https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image*/ .center-cropped { width: 100px; height: 100px; background-position: center center; background-repeat: no-repeat; overflow: hidden; } /* Set the image to fill its parent and make transparent */ .center-cropped img { min-height: 100%; min-width: 100%; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 5-7 */ filter: alpha(opacity=0); /* modern browsers */ opacity: 0; } /*From https://css-tricks.com/text-blocks-over-image/ */ .image-block { position: relative; width: 100%; /* for IE 6 */ } h4 { position: absolute; top: 0; left: 0; width: 100%; } h4 span { color: white; /*font: bold 24px/45px Helvetica, Sans-Serif;*/ letter-spacing: -1px; background: rgba(0, 0, 0, 0.7); padding: 2px; } h4 span.spacer { padding:0 2px; }