2

Galera, me tirem uma dúvida. Como inserir uma imagem responsiva no canto superior de uma seção utilizando bootstrap. Ex: esse é o site que estou desenvolvendo renpa.esy.es, porém, na quarta seção que tem pacotes motos, quero colocar uma imagem bem no canto superior do lado direito da imagem de fundo.

Código HTML - SEÇÃO

<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>

CODIGO CSS - 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;
}

1 Resposta 1

1

Não creio que isso seja necessário o bootstrap, pode fazer com 3 linhas de CSS

Veja funcionando: https://fiddle.jshell.net/9vcbx8tz/

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

}
</style>

No caso estou especificando que sempre ficará no canto superior direito.

5
  • ôpa,deu certo. Muito obrigado. Perfeito Commented 29/12/2016 às 1:42
  • Mas uma outra dúvida. Agora eu quero colocar essa mesma imagem na mesma posição no lado esquerdo na 3 seção em"pacote carro", porém, ao inserir, a imagem vai pro topo da página, ou seja, vai pra primeira seção. Como fazer? Commented 29/12/2016 às 1:50
  • recomendo abrir outra pergunta, o conceito aqui é uma pergunta simples por tópico. se essa está respondida fechamos ela e abra uma nova, ficarei feliz em poder ajudar;
    – Dorath
    Commented 30/12/2016 às 16:51
  • mas em teoria basta trocar o right por left: 0px
    – Dorath
    Commented 30/12/2016 às 16:52
  • Não esqueça que o elemento pai precisa ter position:relative para que o filho com position:absolute fique na posição desejada.
    – Marta
    Commented 2/09/2017 às 21:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .