Twitter Bootstrap Question posted in

Bootstrap: How to make a background image sit between the edge of the container and the edge of the body? – Twitter bootstrap

I’m currently in the process of developing a site using Twitter Bootstrap. In the site’s design I have a background-image which sits between the edge of the container and the edge of the body.

Below is my code.

HTML:

<body>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h1>Lorem Ipsum.</h1>
                </div>
            </div>
        </div>
    </section>
</body>

CSS:

section {
   background-image: url('example.png');
   background-repeat: no-repeat;
   background-position: bottom right;
}

The code above simply applies a background-image to the bottom right of my section. I need to ensure that the background-image is at the maximum width it can be without intercepting the container.

Here’s a diagram which might better explain what I’m looking to do.

Diagram

How do I go about achieving this effect without the use of jQuery/Javascript?

Thanks in advance!

Tags:

2

Answers


  1. 0

    I think this is what you want–

    Go full page to see it.

    check snippet

    .container-fluid  {
   background: url('http://www.jonomus.net/wp-content/uploads/2015/10/Screenshot_2015-10-20-10-06-10.png');
   background-position: right bottom;
   background-repeat: no-repeat;
   background-size: 130px 130px;
}
.col-xs-6 {
  background-color:yellow;
  color: red;
  height:400px;
}
    <html>
<head>

 <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.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
       </head>
      
<body>
    <section>
    <div class="container-fluid ">
       
            <div class="row">
                <div class="col-xs-6 col-xs-offset-3">
                    <h1>Lorem Ipsum.</h1>
                </div>
            </div>
        </div>
       
    </section>
</body>
</html>
    Login or Signup to reply.
  2. 0

    CSS only – without the use of jQuery/Javascript

    As you may know, the Bootstrap .container pixel width changes depending on the screen width. There are 3 separate media queries used for this. You can adjust the background image size in the same way, at each Bootstrap breakpoint..

    section {
   min-height: 100vh;
   background-image: url('//placehold.it/300');
   background-repeat: no-repeat;
   background-position: right bottom; 
   background-attachment: fixed;
}    

@media (min-width: 768px) {
    section {
        background-size: calc((100% - 750px)/2);
    }
}
@media (min-width: 992px) {
    section {
        background-size: calc((100% - 970px)/2);
    }
}
@media (min-width: 1200px) {
    section {
        background-size: calc((100% - 1170px)/2);
    }
}

    Demo: http://www.codeply.com/go/985dNICmvQ

    Note: On the xs screen, the container becomes 100% width so your background image will disappear.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search