"bacground image well"
Bootstrap 3.1.0 Snippet by muhittinbudak

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <h2>Well Size</h2> <div class="well well-lg arka"><h2>1</h2>Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</div> <div class="well well-lg arka1"><h2>2</h2>Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</div> <div class="well well-lg arka2"><h2>3</h2>Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</div> <div class="well well-lg arka3"><h2>4</h2>Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</div> <div class="well well-lg arka4"><h2>5</h2>Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</div> <div class="well well-lg p-0 border-0"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKef4R7ztpscFzQcTBRlsBMXNWN68ssKScRBlTwU2u4SOdlmau6wy81q1d2hBZlln3d9DecN478MxL4hZgDDZfZ3LMZw88YCIAcOOmj8GGW-Zb861wqlI0V6lLEJp3AixEg4HQCO1ajvMRg9Mh5MaSWt1snWb2rzVW_HNP6_Nx5-cXdKKHxwnghuW-vd8C/s1600/obp-bg.png" class="img-responsive"> <div class="icerik"> <h2>1</h2> Lorem Ips kum...Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. </div> </div> </div>
.arka { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKef4R7ztpscFzQcTBRlsBMXNWN68ssKScRBlTwU2u4SOdlmau6wy81q1d2hBZlln3d9DecN478MxL4hZgDDZfZ3LMZw88YCIAcOOmj8GGW-Zb861wqlI0V6lLEJp3AixEg4HQCO1ajvMRg9Mh5MaSWt1snWb2rzVW_HNP6_Nx5-cXdKKHxwnghuW-vd8C/s1600/obp-bg.png'); background-repeat: no-repeat; background-position: top; background-size: contain; display: inline-block; width: auto; max-width: 100%; } .arka1 { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKef4R7ztpscFzQcTBRlsBMXNWN68ssKScRBlTwU2u4SOdlmau6wy81q1d2hBZlln3d9DecN478MxL4hZgDDZfZ3LMZw88YCIAcOOmj8GGW-Zb861wqlI0V6lLEJp3AixEg4HQCO1ajvMRg9Mh5MaSWt1snWb2rzVW_HNP6_Nx5-cXdKKHxwnghuW-vd8C/s1600/obp-bg.png'); background-repeat: no-repeat; background-position: top; background-size: 100% auto; width: 600px; /* Resmin gerçek genişliği */ max-width: 100%; /* Mobilde taşmasını engeller */ } .arka2 { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKef4R7ztpscFzQcTBRlsBMXNWN68ssKScRBlTwU2u4SOdlmau6wy81q1d2hBZlln3d9DecN478MxL4hZgDDZfZ3LMZw88YCIAcOOmj8GGW-Zb861wqlI0V6lLEJp3AixEg4HQCO1ajvMRg9Mh5MaSWt1snWb2rzVW_HNP6_Nx5-cXdKKHxwnghuW-vd8C/s1600/obp-bg.png'); background-repeat: no-repeat; background-position: center; background-size: contain; width: fit-content; max-width: 100%; min-height: 300px; /* Resmin yüksekliğine göre ayarlayın */ } .arka3 { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKef4R7ztpscFzQcTBRlsBMXNWN68ssKScRBlTwU2u4SOdlmau6wy81q1d2hBZlln3d9DecN478MxL4hZgDDZfZ3LMZw88YCIAcOOmj8GGW-Zb861wqlI0V6lLEJp3AixEg4HQCO1ajvMRg9Mh5MaSWt1snWb2rzVW_HNP6_Nx5-cXdKKHxwnghuW-vd8C/s1600/obp-bg.png'); width:100%; /* Metin okunaklılığı için hafif iç gölge ekleyelim */ box-shadow: 0 4px 8px rgba(0,0,0,0.1); color: #000; /* Arka plan koyu olduğu için metin rengini beyaz yaptık */ } .arka4 { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwm7Jm_vvsYMd7pScTEMQ6C1wlam0O8c7Tv1ZSYzgd0KdpBbv1eaOQjLpD7xLJWvLl1fyiyTaVaP6x67jAuoKRbN7AYtvi1yreEnnDK0NpbjBH3K3FXmeL8nkfdxWY85wybxvjie2YJBCbuFLdQbz4l5Xyy2THR7OBng5uJz-JiUJLhL-bBAd5WX2PkFSx/s1600/obp-bg.jpg'); background-repeat: no-repeat; background-position: top; background-size: 100% auto; max-width: 100%; /* Mobilde taşmasını engeller */ margin-bottom:25px; } .well { position: relative; display: inline-block; } .well .icerik { position: absolute; top: 0; left: 0; padding: 15px; color: #000; }

Related: See More


Questions / Comments: