Responsive Image top corner-Bootstrap

Guys, get me a question. How to insert a responsive image at the top of a section using bootstrap. Ex: this is the site I'm developing renpa.esy.es however, in the fourth section that has Motorcycle packages, I want to put an image right at the top right of the background image.

HTML Code-Section

<section class="bg-silver" id="four">




        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">



                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">

                        </div>

                    </a>
                    <div class="portfolio-caption">

                    </div>
                </div>
                <div class="col-md-12 text-center">
                    <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">

                        </div>
                        <img src="assets/a4.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">

                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./assets/1.png">
                        <img src="./assets/1.png" class="img-responsive" alt="Image 4">
                        <div class="gallery-box-caption">
                            <div class="gallery-box-content">
                                <div>
                                    <i class="icon-lg ion-ios-search"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./assets/2.png">
                        <img src="./assets/2.png" class="img-responsive" alt="Image 4">
                        <div class="gallery-box-caption">
                            <div class="gallery-box-content">
                                <div>
                                    <i class="icon-lg ion-ios-search"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./assets/3.png">
                        <img src="./assets/3.png" class="img-responsive" alt="Image 4">
                        <div class="gallery-box-caption">
                            <div class="gallery-box-content">
                                <div>
                                    <i class="icon-lg ion-ios-search"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">

                        </div>

                    </a>
                    <div class="portfolio-caption">

                    </div>
                </div>
            </div>


    </section>

CSS CODE - BOOTSTRAP

.bg-silver {

   position: relative;
    min-height: auto;
    text-align: center;
    color: #fff;
    width: 100%;
    background-color: #c9c9c9;
    background-image:url(../assets/moto.png);
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
     height:auto !important;


}
.content-section-d {
    min-height: auto;
    width: 100%;


    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    padding: 100px 15px;    
    height:auto !important;
}
Author: Dorathoto, 2016-12-27

1 answers

I don't think this is necessary bootstrap, it can do with 3 rows of CSS

See working: https://fiddle.jshell.net/9vcbx8tz /

<div class="LogoSuperior">
   <img src="imagem.jpg">
</div>
<style>
.LogoSuperior{
    position: absolute;
    top: 0px;
    right: 0px;

}
</style>

In the case I am specifying that it will always be in the upper right corner.

 1
Author: Dorathoto, 2016-12-28 12:07:16