Responsive upper corner image - Bootstrap

Navigation
2

Well, let me have a question. How to insert a responsive image in the upper corner of a section using bootstrap. Ex: this is the site that I am developing renpa.esy.es, but in the fourth section that has bikes packages, I want to place an image in the upper right corner 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;
}
    
asked by anonymous 27.12.2016 / 02:25

1 answer

1

I do not think it's necessary to bootstrap, you can do with 3 lines of CSS

See it working: link 

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

}
</style>

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

    
28.12.2016 / 13:07
SP2-0552: Bind variable "19" not declared What are StaticResources and DynamicResources in WPF?