CODEWITHSUNDEEP
csstwitter-bootstrap
tanay joshi burningknight7
tanay joshi burningknight7

Reputation: 25

BootStrap:jumbotron background image not working?

I am having a problem adding background image to jumbotron class using bootstrap-css framework , I have linked my page to bootstrap cdn. In my style tag of the page I have added 

.jumbotron {
  height: 500px;
  display: flex;
  align-items: center;
  background: url("C:\Users\burningknight7\Desktop\Gusto\Gusto_Background_Food.jpg") center center;
  background-size: cover;
  margin: 100px 0px;
}

This code to style the jumbotron class personaly and by url you can guess which image I want to add to jumbotron background and where it is stored.(Gusto is the folder I created on desktop)but the image is not showing up I tried an online url for a different image too but that too doesn't seem to work.

Upvotes: 2

Views: 2833

Answers (2)

Sk Arif
Sk Arif

Reputation: 1120

Have you tried changing the class name although I don't think it's because of the class name. It's happening because of your image url. As Gusto is your project folder, changing the url to "Gusto_Background_Food.jpg" would work.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <title>Gusto Food</title>
  </head>
 <body>
  <div class="jumbotron background">
    <h1>Gusto Food!</h1>
    <p>There must be something good that we are looking for.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
  </div>
 </body>
</html>

style.css

.background{
  height:500px;
  display:flex;
  align-items:center;
  background:url("Gusto_Background_Food.jpg") center center;
  background-size:cover;
  margin:100px 0px;
}

Folder Structure: 

Gusto            
  - index.html
  - style.css
  - Gusto_Background_Food.jpg

I guess this would help you. Please feel free to comment if this doesn't work for you.

Upvotes: 2

satya
satya

Reputation: 1185

It is working..Please see the JS Fiddle here:

https://jsfiddle.net/DTcHh/19792/

HTML:

<div class="jumbotron"></div>

CSS;

.jumbotron {
  height: 500px;
  display: flex;
  align-items: center;
  background: url("http://www.wallpaperstunnel.com/wp-content/uploads/2016/02/Green-Background-Screensaver-HD-Wallpapers.jpg") center center;
  background-size: cover;
  margin: 100px 0px;
}

Upvotes: 0

Related Questions