Joomlaのブートストラップで背景イメージとテキストのサイズを変更するには

Question

現在、Joomla 3.6.5でTwitter Bootstrapを使用して新しいサイトを構築しています。私のサイトは現在私のlocalhost上にあり、私は現在持っているもののイメージを付けましたが、私は今これを反応的にするためにブートストラップコードを追加しようとしていますが、私はセクション（画像は下に示されています）と苦労しています

私がしたいのは、これをモバイル版のそれぞれの上に重ねることですが、画面が小さくなるにつれて背景画像（添付されている）もサイズを変更する必要があります。

タブレットの画面サイズに関する問題にどのように対処するかについてのアドバイスもありがとうと思います。理想的には、3つすべてを並べて表示するか、タブレット画面にたくさんのスペースがあると思いますサイズ。

私の現在のHTMLは以下の通りです：

<div id="mainbox" class="span12"> 
<div class="box1 span4"> 
<div class="boxes-img1"><img src="images/pic1.png" alt="" border="0" /></div> 
<div class="boxes1">20 MINUTES REPAIRS</div> 
<div class="boxestext1">We have a 20 Minute Repairs Service and all Minor Repairs are diagnosed while you wait. Upgrades are also provided and completed within 20 minutes!</div> 
<div class="boxes-link1">READ MORE</div> 
</div> 
<div class="box2 span4"> 
<div class="boxes-img2"><img src="images/pic2.png" alt="" border="0" /></div> 
<div class="boxes2">WALK-IN REPAIRS</div> 
<div class="boxestext2">We have a Walk-In Repairs Service and all faults are diagnosed while you wait. Please bear in mind all Major Faults can take up 24/48 hours.</div> 
<div class="boxes-link2"> 
<div class="boxes-linktxt2">READ MORE</div> 
</div> 
</div> 
<div class="box3 span4"> 
<div class="boxes-img3"><img src="images/pic3.png" alt="" border="0" /></div> 
<div class="boxes3">BUY MOBILE PHONES</div> 
<div class="boxestext3">All the latest models and great deals on Mobile Phones available, so visit our store today!</div> 
<div class="boxes-link3"> 
<div class="boxes-linktxt3">READ MORE</div> 
</div> 
</div> 
</div> 

CSS：

#mainbox { 
    float: left; 
    position: relative; 
    background: url(../images/box.png) no-repeat; 
    height: 249px; 
    width: 100%; 
    } 

div.box1{ 
    position: relative; 
} 

div.boxes1 { 
    position:absolute; 
    top:65px; 
    left:0; 
    margin: 0 0 29px 39px; 
    text-decoration:none; 
    font-size: 24px; 
    font-family: 'Cabin-Bold'; /* no .ttf */ 
    font-style:italic; 
    color:#fff; 
    width: 268px; 
    } 

div.boxestext1 { 
    position:absolute; 
    top:115px; 
    left:0; 
    margin: 0 0 0 39px; 
    text-decoration:none; 
    font-size: 13px; 
    font-family: 'Open-Sans'; /* no .ttf */ 
    color:#7A869B; 
    width: 268px; 
    } 

div.boxes-img1 { 
    position:absolute; 
    top:-40px; 
    left:0; 
    margin: 0 0 14px 125px; 
    width: 268px; 
    } 

div.boxes-link1 { 
    display:block; 
    background: url(../images/readmore.png) no-repeat; 
    margin: 0 0 14px 125px; 
    position:absolute; 
    top:221px; 
    left:0; 
    height: 37px; 
    width: 84px; 
    color:#FFF; 
    text-decoration:none; 
    font-size: 12px; 
    font-family: 'Cabin'; /* no .ttf */ 
    padding: 10px 0 0 9px; 
} 

.boxes-link1:visited, .boxes-link1:hover, .boxes-link1:active { 
    display:block; 
    background: url(../images/readmoreover.png) no-repeat; 
    margin: 0 0 14px 125px; 
    position:absolute; 
    top:221px; 
    left:0; 
    height: 37px; 
    width: 84px; 
    color:#fc1300; 
    text-decoration:none; 
    font-size: 12px; 
    font-family: 'Cabin'; /* no .ttf */ 
    padding: 10px 0 0 9px; 
} 

div.box2{ 
    position: relative; 
} 

div.boxes2 { 
    position:absolute; 
    top:65px; 
    left: 310px; 
    margin: 0 0 29px 39px; 
    text-decoration:none; 
    font-size: 24px; 
    font-family: 'Cabin-Bold'; /* no .ttf */ 
    font-style:italic; 
    color:#fff; 
    width: 268px; 
    } 

div.boxestext2 { 
    position:absolute; 
    top:115px; 
    left: 310px; 
    margin: 0 0 0 39px; 
    text-decoration:none; 
    font-size: 13px; 
    font-family: 'Open-Sans'; /* no .ttf */ 
    color:#7A869B; 
    width: 268px; 
    } 

div.boxes-img2 { 
    position:absolute; 
    top:-40px; 
    left: 310px; 
    margin: 0 0 14px 125px; 
    width: 268px; 
    } 

div.boxes-link2 { 
    position:absolute; 
    top:221px; 
    left:310px; 
    margin: 0 0 14px 125px; 
    height: 37px; 
    width: 268px; 
    background: url(../images/readmore.png) no-repeat; 
} 

div.boxes-linktxt2 { 
    margin: 10px 0 0 9px; 
    text-decoration:none; 
    font-size: 12px; 
    font-family: 'Cabin'; /* no .ttf */ 
    color:#FFF; 
} 
/* 2 BOXES END */ 

div.box3{ 
    position: relative; 
} 

div.boxes3 { 
    position:absolute; 
    top:65px; 
    right:0; 
    margin: 0 39px 29px 0; 
    text-decoration:none; 
    font-size: 24px; 
    font-family: 'Cabin-Bold'; /* no .ttf */ 
    font-style:italic; 
    color:#fff; 
    width: 268px; 
    } 

div.boxestext3 { 
    position:absolute; 
    top:115px; 
    right:0; 
    margin: 0 39px 0 0; 
    text-decoration:none; 
    font-size: 13px; 
    font-family: 'Open-Sans'; /* no .ttf */ 
    color:#7A869B; 
    width: 268px; 
    } 

div.boxes-img3 { 
    position:absolute; 
    top:-40px; 
    right:0; 
    margin: 0 -50px 14px 0; 
    width: 268px; 
    } 

div.boxes-link3 { 
    position:absolute; 
    top:221px; 
    right:0; 
    margin: 0 -50px 14px 0; 
    height: 37px; 
    width: 268px; 
    background: url(../images/readmore.png) no-repeat; 
} 

div.boxes-linktxt3 { 
    margin: 10px 0 0 9px; 
    text-decoration:none; 
    font-size: 12px; 
    font-family: 'Cabin'; /* no .ttf */ 
    color:#FFF; 
} 

すべてのヘルプは本当にいただければ幸いです。

Answer 1

私は上記のアプローチが完全に間違っていると思います。あなたはビューポート＃でのBG画像について

とあなたの問題を解決するだろう。このグリッドスタイルを使用して、このBootstrap Grid Options を見てみましょうCOL-XX-XXのグリッドスタイル

を使用する必要があり、すべての

ファーストメインボックスを試してみてくださいobject-fit:cover;