Возникли некоторые проблемы с angular, создающим полностью реактивный фон

Question

Я стараюсь, чтобы эта веб-страница была действительно реактивной и имела разные разрешения. Я не могу заставить фоновые изображения покрыть всю страницу. Это изображения с высоким разрешением, все фоновые изображения не показывают все изображение.

CSS:

@media screen and (max-width: 600px) {
    .column {
        width: 100%;        
    }
}

.bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #FFFFFF;
    padding: 9px 90px;
    font-family: 'Karma', serif;

}

.col {
    padding-left:0px;
    padding-right: 0px;
}
.container-fluid {
    padding-left: 0px;
    padding-right: 0px;
}
.bg-left {

   height: 100%;
   width:100%;
   background-size:cover;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url(https://trello-attachments.s3.amazonaws.com/5e555166a4c1786edb33758a/5e710c0ee0447d546d31664b/c01b769110cdb1569938e31df65c24d4/electric-car-1458836.jpg)


}

.bg-right {
    background-color: #5547A3;
    height: 100vh;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}

HTML:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Karma&display=swap');
</style>
<!------ Include the above in your HEAD tag ---------->

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-8 col-lg-8">
            <div class="bg bg-left">
                <h2></h2>
            </div>
        </div>
        <div class="col-xs-12 col-md-4 col-lg-4">
            <div class="bg bg-right">
            <h1 style="text-align:center;font-weight:bold">Membership Tiers</h1>
         <h2 style="text-align:center">____________________________________</h2> 
         <h2 style="text-align:center">Free</h2>
            <h5 style="text-align:center">Tier gets access to email updates, and basic pay-to-use charging functions.</h5>
            <h2 style="text-align:center">____________________________________</h2>
            <h2 
            style="text-align:center">Preferred</h2>
            <h5 style="text-align:center">Tier gets all above, and bump in priority over free. Continous use with no financial obligation.</h5>
            <h2 style="text-align:center">____________________________________</h2>
            <h2 
            style="text-align:center">Hero</h2>
            <h5 style="text-align:center">Tier gets all above, and bump(s) in priority over free and preferred. Basic level membership, monly/yearly payment plan that allows access to 10+ classes per month, 10 charges per month.</h5>
                        <h2 style="text-align:center">____________________________________</h2>
            <h2 
            style="text-align:center">Superhero</h2>
            <h5 style="text-align:center">Tier is eligible for weeklyu discounts, and premier services at the center. Unlimited class access, unlimited charges per month, and complimentary evennt tickets. Charges about $50 USD per month.</h5>
                                    <h2 style="text-align:center">____________________________________</h2>


            </div>
        </div>
    </div>
</div>

Answer 1

Я заметил, что у вас есть цветной фон для большей части контента, в то время как фоновое изображение относится только к родителю h2. Если вы перенесете свои фоновые правила в класс container-Fluid, он охватит всю страницу. Я также удалил дополнительные отступы для класса col просто для устранения горизонтального переполнения. (Также, используя другой пример изображения, так как я не могу вытащить ваше изображение из trello). Надеюсь, это поможет! https://codepen.io/richiegarcia/pen/LYpyBOp

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Karma&display=swap');
</style>
<!------ Include the above in your HEAD tag ---------->

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-8 col-lg-8">
            <div class="bg bg-left">
                <h2></h2>
            </div>
        </div>
        <div class="col-xs-12 col-md-4 col-lg-4">
            <div class="bg bg-right">
            <h1 style="text-align:center;font-weight:bold">Membership Tiers</h1>
         <h2 style="text-align:center">____________________________________</h2> 
         <h2 style="text-align:center">Free</h2>
            <h5 style="text-align:center">Tier gets access to email updates, and basic pay-to-use charging functions.</h5>
            <h2 style="text-align:center">____________________________________</h2>
            <h2 
            style="text-align:center">Preferred</h2>
            <h5 style="text-align:center">Tier gets all above, and bump in priority over free. Continous use with no financial obligation.</h5>
            <h2 style="text-align:center">____________________________________</h2>
            <h2 
            style="text-align:center">Hero</h2>
            <h5 style="text-align:center">Tier gets all above, and bump(s) in priority over free and preferred. Basic level membership, monly/yearly payment plan that allows access to 10+ classes per month, 10 charges per month.</h5>
                        <h2 style="text-align:center">____________________________________</h2>
            <h2 
            style="text-align:center">Superhero</h2>
            <h5 style="text-align:center">Tier is eligible for weeklyu discounts, and premier services at the center. Unlimited class access, unlimited charges per month, and complimentary evennt tickets. Charges about $50 USD per month.</h5>
                                    <h2 style="text-align:center">____________________________________</h2>


            </div>
        </div>
    </div>
</div>

@media screen and (max-width: 600px) {
    .column {
        width: 100%;        
    }
}

.bg {
center;
    color: #FFFFFF;
/*     padding: 9px 90px; */
    font-family: 'Karma', serif;

}

.col {
    padding-left:0px;
    padding-right: 0px;
}
.container-fluid {
    border: 1px solid red;
    padding-left: 0px;
    padding-right: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-size: 100%;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url(https://wallpapercave.com/wp/wp2555019.jpg);  
  background-color: blue;
}
.bg-left {

   height: 100%;
   width:100%;
/*    background-size:cover;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url(https://trello-attachments.s3.amazonaws.com/5e555166a4c1786edb33758a/5e710c0ee0447d546d31664b/c01b769110cdb1569938e31df65c24d4/electric-car-1458836.jpg) */


}

.bg-right {
/*     background-color: #5547A3; */
    height: 100vh;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}