Top corner responsive image - Bootstrap

Asked

Viewed 1,712 times

2

Guys, ask me a question. How to insert a responsive image in the top corner of a section using bootstrap. Ex: this is the site that I am 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;
}
html css web-application bootstrap responsive

1 answer

1

I don’t think this is necessary bootstrap, can do with 3 CSS lines

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 this case I am specifying that you will always be in the upper right corner.

  • It worked. Thank you very much. Perfect

  • But there’s another question. Now I want to put this same image in the same position on the left side in the "car package" section, but when inserting, the image goes to the top of the page, that is, goes to the first section. How to do?

  • I recommend opening another question, the concept here is a simple question by topic. if this is answered we close it and open a new, I will be happy to help;

  • but in theory just exchange the right for left: 0px

  • Don’t forget that the parent element needs to have position:relative so that the child with position:absolute stay in the desired position.

Browser other questions tagged html css web-application bootstrap responsive

You are not signed in. Login or sign up in order to post.