CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sonu
Sonu

Reputation: 23

Image is too big for jumbotron

It's my first post and I'm trying to fix my CSS. I have a .jumbotron (Bootstrap) and my image is too big. Re-sizing it won't work as people have different sized screens. Here's the code. 

.jumbotron {
	background-image: url('SONUBANNER.png');
	height: 500px;
	width: auto;
	margin-top: 5rem;
}
<!DOCTYPE html>
<html>      
        <head>
        </head>
        <body>
                <section class="jumbotron">
                        <div class="container">
                        </div>
                </section>
        </body>
</html>

I tried having the the min-width: CSS selector, but that had the same affect. I do not want to have my viewers scroll to see the rest of the .jumbotron. Can anyone show me the fix?

Upvotes: 1

Views: 1021

Answers (2)

AVI
AVI

Reputation: 5703

You won't be able to use all of the features in Bootstrap if you are adding image with your CSS class.Just use the bootstrap features which comes.Add your image in to img-responsive class.

.jumbotron {
	height: 500px;
	width: auto;
	margin-top: 5rem;
}
<html>      
        <head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
        <body>
                <section class="jumbotron">
                        <div class="container">
   <img src="http://weknowyourdreamz.com/images/evening/evening-09.jpg" class="img-responsive" alt="Cinque Terre"> 

<!-- <img src="SONUBANNER.png" class="img-responsive" alt="Cinque Terre"> -->


                  
                          
                        </div>
                </section>
        </body>
</html>

Upvotes: 0

mlegg
mlegg

Reputation: 832

/* Latest compiled and minified CSS included as External Resource*/
dna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.jumbotron {
  height: 500px;
  display: flex;
  align-items: center;
  background: url("SONUBANNER.png") center center;
  background-size: cover;
  margin-top: 5rem;
}
 <div class="jumbotron">
    
</div>

Upvotes: 1

Related Questions