Bootstrap 5, full viewport + responsive bg

Question

I am able to use 2 full viewport div using the following code. Sadly, when I try to add an HD (1366x768) image as the background for the first full viewport div, it breaks everything. I tried to use img-fluid as mentioned in Bootstrap 5 docs

I am using the default HTML template provided by getbootstrap.com as starting template.

It would be nice to know how to make the background image responsive and still keep the 2 full viewport sections intact. Please feel free to ask any other info you would want to know. Thanks.

      
 



     

        
            
                
                    


                        


                            Android apps
                            Single Page Apps
                          
                          
                            Web Apps
                            Cloud based apps
                          
                         

                      
             
                                    
                      
              
              
                One website, which works on Android, iPhone, iPad, Tablets, Laptops, Desktop and all. Fast, responsive, modern and secure framework.

CSS in case you need to refer

/* Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');

body {
    font-family: 'Work Sans', sans-serif;
}


.fullbg { 
    background-image: url(/home.svg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
   
      }

.landpg {
    background-image: url(/home.svg) fixed; 
 
   
}

  
#grad {
    background-image: linear-gradient(to bottom right, #0ca8cc,#9700ff);
  }


.bg1 {
    background-color: #007cff;
    color: white;
}

.bg2 {
    background-color: #00ff64;
    color: black;
}

.bg3 {
    background-color: white;
}

.pd10 {
    padding: 10px;
}

.pd20 {
    padding: 20px;
}

.pd50 {
    padding: 50px;
}

.pt50 {
    padding-top: 50px;
}

.pdbot50 {
    padding-bottom: 50px;
}

.marleft10 {
    margin-left: 10px;
}

.green {
    color: #1fec1f;
}

.blue {
    color: blue;
}

.red {
    color: red;
}

.bluesky {
    color: skyblue;
}

.white {
    color: white;
   }

/* hover */

.and:hover {
    background-color: rgba(37, 147, 161, 0.212);
}

.ang:hover {
    background-color: rgba(37, 147, 161, 0.212);
}

.chr:hover {
    background-color: rgba(37, 147, 161, 0.212);
}

.dok:hover {
    background-color: rgba(37, 147, 161, 0.212);
}

screen cast. When I add the responsive image code form Bootstrap docs everything breaks as seen in GIF below

user_14457833 · Answer

i found issue you have to remove vh-100 from your div which wraps your image check below snippet it's working fine let me know if there is any changes i have added a class named as custom to set 100% image width and to treat image as block element. You can remove if you don't want and add yours

/* Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');

body {
    font-family: 'Work Sans', sans-serif;
}

.custom{
  width: 100%;
  display: block;
  margin:auto;
}

.fullbg { 
    background-image: url(https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=889&q=80) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
   
      }

.landpg {
    background-image: url() fixed; 
 
   
}

  
#grad {
    background-image: linear-gradient(to bottom right, #0ca8cc,#9700ff);
  }


.bg1 {
    background-color: #007cff;
    color: white;
}

.bg2 {
    background-color: #00ff64;
    color: black;
}

.bg3 {
    background-color: white;
}

.pd10 {
    padding: 10px;
}

.pd20 {
    padding: 20px;
}

.pd50 {
    padding: 50px;
}

.pt50 {
    padding-top: 50px;
}

.pdbot50 {
    padding-bottom: 50px;
}

.marleft10 {
    margin-left: 10px;
}

.green {
    color: #1fec1f;
}

.blue {
    color: blue;
}

.red {
    color: red;
}

.bluesky {
    color: skyblue;
}

.white {
    color: white;
   }

/* hover */

.and:hover {
    background-color: rgba(37, 147, 161, 0.212);
}

.ang:hover {
    background-color: rgba(37, 147, 161, 0.212);
}

.chr:hover {
    background-color: rgba(37, 147, 161, 0.212);
}

.dok:hover {
    background-color: rgba(37, 147, 161, 0.212);
}



  
    
    
    

    
    


    Hello, world!
  
  
   

      
      


 

      
 



     

        
            
                
                    


                        


                            Android apps
                            Single Page Apps
                          
                          
                            Web Apps
                            Cloud based apps
                          
                         

                      
             
                                    
                      
              
              
                One website, which works on Android, iPhone, iPad, Tablets, Laptops, Desktop and all. Fast, responsive, modern and secure framework.

Bootstrap 5, full viewport + responsive bg

1 Answers