CODEWITHSUNDEEP
csstwitter-bootstrap
eniac05
eniac05

Reputation: 491

how to strecth image in a row bootsrap

I just learn about bootstrap, I have html code like this:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
   <title>Bootstrap 101 Template</title>
   <!-- Bootstrap -->
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
    <style>

       .bodinya { background-image:url(IMG_5555.jpg);
               background-size: cover; 
               background-repeat: no-repeat;
        }
   </style>
   <div class="navbar navbar-default  navbar-fixed-top" role="navigation">
   <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only"> Toggle navigation </span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Wisuda  </a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Loggin<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Mahasiswa</a></li>
                        <li><a href="#">Prodi</a></li>
                        <li><a href="#">BAK</a></li>
                    </ul>    
                </li>
             </ul>
        </div>
   </div> 
</div>
  <div class="row bodinya">
   <div class="span0">
     <h2>Heading</h2>
     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
   </div>
 </div>

 <!-- Fixed Footer -->
 <div  class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
    <div class="container">
        <div class="navbar-text pull-left">
            <p>© my</p>
        </div>
    </div>
</div>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="js/bootstrap.min.js"></script>
   </body>
   </html>

I want to strech my image in row which have class 'bodinya', i have try to use css like my style code above but the image not show. Any help?

Upvotes: 0

Views: 44

Answers (1)

BahaEddine Ayadi
BahaEddine Ayadi

Reputation: 987

It's working for me in here : fiddle

The only problem that I could think of is that the url for the image is wrong, so can you inspect the bodinya div, and see if the image is showing off like in this image.

enter image description here

So see if the url in this line is working and linking to the image or not:

background-image:url(IMG_5555.jpg);

I hope that this'll help.

Upvotes: 2

Related Questions