4 Replies Latest reply: Sep 15, 2014 8:22 PM by Ben Pleysier RSS

    background-image

    Kokeville Community Member
    Kokeville Sep 15, 2014 4:42 PM

      Hey,

       

      I'm trying to used on mi css file a background-image tag but it doesn't work. Can someone help me with this?

       

      Thank you

      • 133 Views
      • Tags:
        • 1. Re: background-image
          Peter Flynn (Adobe) Adobe Employee
          Peter Flynn (Adobe) Sep 15, 2014 5:04 PM (in response to Kokeville)

          For general CSS and web development questions, it might be better to ask on a general Q&A site like Stack Overflow.  It's also best to provide a copy of your code when asking a question like this, because it's very difficult for people to offer suggestions without knowing the specifics.

           

          Hope that helps,

           

          - Peter

          • 2. Re: background-image
            Ben Pleysier CommunityMVP
            Ben Pleysier Sep 15, 2014 5:52 PM (in response to Kokeville)

            I can help, but I will need more info. The best way is to supply a link to your site. Another way is to show your code in a post.

            • 3. Re: background-image
              Kokeville Community Member
              Kokeville Sep 15, 2014 5:56 PM (in response to Ben Pleysier)

              I just figure it out hot to used the background-image attribute. Now my problem is that I want to fixed the background of my my jumbotron to the height off the screen. How can I do this? I am using bootstrap and Edge code.

               

              MY HTML:

               

                  <!-- Jumbotron -->   

                  <div class="jumbotron">

                    <div class="container">

                      <p>Logos.</p>

                      <p>Branding.</p>

                      <p>Website.</p>

                      <h4>and more...</h4>

                      <p><a class="btn btn-primary btn-lg" role="button">Start a project!!</a></p>

                    </div>

                  </div>

                  <!-- Jumbotron end -->

               

              MY CSS:

               

              .jumbotron {

                  background-image: url(../Images/background.png);

                  background-size: cover;

              }

              • 4. Re: Re: background-image
                Ben Pleysier CommunityMVP
                Ben Pleysier Sep 15, 2014 8:22 PM (in response to Kokeville)

                Not sure why you would want to use the Jumbotron for this.

                 

                A better way is to create a container with a class of background or similar as in

                 

                <!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="bootstrap/3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap/3/css/bootstrap-theme.min.css"> 
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script src="bootstrap/3/js/bootstrap.min.js"></script>
<style>
html, body {
    height: 100%
}
.background {
    background: url(../Images/background.png);
    background-size: cover;
    height: 100%
}
</style>
</head>

<body>
<div class="background">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <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>
    </div>
</div>
</body>
</html>