How to make background text same size - css

Question

i have a box for a text like this
my css is like this for the box,
.bg-text-kol2 {
background-color: #ffffff;
background-size: 10px 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
}
because this slider use swipper slider this is the js,
$(document).ready(function() {
(function ($) {
//initialize swiper when document ready
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
spaceBetween: 20,
centeredSlides: true,
})(jQuery);
});
the question is how to make the size is same? i want to make the box is 640px x 640px?

Answer 1

I think you can work on from this demo, I tried to replicated your images.
The most important here is you need to set the swiper height, this property helps the plugin to determine the size of the swiper.
Codepen demo: https://codepen.io/DieByMacro/pen/mYxJNo
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
slidesPerView: 2,
loop: true,
spaceBetween: 20,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
.swiper-container {
width: 100%;
height: 600px;
}
/**
Using flex to make sure the content expand full. This makes all items height equal
*/
.swiper-item {
display: flex;
flex-flow: column nowrap;
}
.swiper-item .item-image {
flex: 0 0 auto;
background: blue;
height: 250px;
}
.swiper-item .item-content {
flex: 1 1 0px;
height: auto;
background: white;
padding: 20px;
width: 85%;
margin: -30px auto 0;
}
.wrapper {
background: lightgreen;
padding: 10px;
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="wrapper">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia unde placeat fuga reprehenderit temporibus non velit molestiae quam ipsam assumenda, quo dignissimos neque, eligendi ad in, debitis voluptatem. Eos harum praesentium facere? Quo fuga ipsum ut tenetur consequuntur veniam minus, doloremque tempora sunt ipsam dolorum reprehenderit magni excepturi ipsa quaerat voluptatum ea repudiandae assumenda placeat, earum eum cumque quis voluptates corporis! Id quis suscipit molestias, dolor laboriosam laudantium corrupti, ipsa cumque culpa tempore enim veniam saepe accusantium, natus dolores! Blanditiis quo fugiat minus iusto modi, iure earum voluptas, consequuntur qui distinctio maiores esse quae error odio cupiditate nisi veniam ad.</p>
</div>
</div>
</div>
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor sequi placeat reiciendis tenetur, illum est, ipsa esse iusto neque fugiat magnam earum nostrum deserunt, odit animi vel quas assumenda fugit obcaecati nulla! Reprehenderit eum, impedit quibusdam laborum harum unde tempore. A facilis itaque, in maiores nam reiciendis provident ducimus nesciunt, consequuntur dolorum numquam optio quis facere quisquam nemo distinctio saepe?</p>
</div>
</div>
</div>
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, tempore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex possimus quaerat omnis officiis. Quaerat dignissimos libero porro nesciunt quidem beatae assumenda. Doloremque temporibus quia soluta cum officiis odio, maxime veritatis.</p>
</div>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>