Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member dubois.norman's Avatar
    Join Date
    Sep 2014
    Posts
    4
    Member #
    40038

    Bootstrap div background full width

    Hi guys,
    I'm new in web development and have a short question.
    Is it possible to make a divs background the full width of the browser window?
    Because it is in my container for the whole content, it has a margin.
    It should be a one page with some sektions, and i want the background of the 3rd sektion having the full width.
    Thanks for your help

  2.  

  3. #2
    Junior Member eirbyte's Avatar
    Join Date
    Aug 2014
    Location
    Ireland
    Posts
    14
    Member #
    40010
    Liked
    1 times
    Not sure if I understand your question!

    But you could try this to override the bootstrap css
    Code:
    .container-fluid {
    max-width: 2000px !important;
    }
    Replace the 2000px with the max size you want the container to be.

  4. #3
    Junior Member
    Join Date
    Sep 2014
    Posts
    4
    Member #
    40045
    Liked
    4 times
    Just like this :

    Code:
    <div class="background name it what you want and create the style...">
    
    <div class="container"></div>
    
    </div>

    If you want to make the background image fullscreen here is the css

    Code:
    background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;

  5. #4
    Junior Member dubois.norman's Avatar
    Join Date
    Sep 2014
    Posts
    4
    Member #
    40038
    Thanks!
    I've got it.
    The mistake was that my html and body element had no rule to set the width 100%. But now i have a small margin, also if i set it to 0?
    It's confusing

  6. #5
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Quote Originally Posted by dubois.norman View Post
    Thanks!
    I've got it.
    The mistake was that my html and body element had no rule to set the width 100%. But now i have a small margin, also if i set it to 0?
    It's confusing
    Some browsers have a default margin for html or body, so yes, please go ahead and

    html, body { margin:0; padding:0 }

    if that doesn't work, that means some other parent container has padding or margins. Use your developer tools to find them (in Chrome, hit F12).


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com