CSS Image

by Marko Keuschnig

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="row well">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">Method One:</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div class="logo pull-left"></div>
    </div>
</div>
<br/>
<div class="row well">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">Method Two:</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div class="logo2 pull-left"></div>
    </div>
</div>
<br/>
<div class="row well">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">Method Three:</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div class="logo3 pull-left"></div>
    </div>
</div>
<br/>
<div class="row well">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">Method Four:</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div class="logo4 pull-left"></div>
    </div>
</div>

CSS

.logo {
    content: url("http://velocityagency.com/wp-content/uploads/2013/08/go.jpg");
    width: auto;
    height: 50px;
    margin-top: 35px;
    margin-bottom: 65px;
}
.logo2:before {
    content: url("http://velocityagency.com/wp-content/uploads/2013/08/go.jpg");
    width: auto;
    height: 50px;
    margin-top: 35px;
    margin-bottom: 65px;
}
.logo3 {
    background: url("http://velocityagency.com/wp-content/uploads/2013/08/go.jpg") no-repeat;
    display:block;
    width: 200px;
    height: 50px;
    margin-top: 35px;
    margin-bottom: 65px;
}
.logo4 {
    display:block;
    background-image: url("http://velocityagency.com/wp-content/uploads/2013/08/go.jpg") no-repeat;
    width: auto;
    height: 50px;
    margin-top: 35px;
    margin-bottom: 65px;
}