Skip to main content
B
beng2000
Known Participant
May 14, 2022
Question

bootstrap responsive image full width

  • May 14, 2022
  • 3 replies
  • 3958 views

Hello  I have been struggling with this image. I want it to be the full width of my responsive container. Here is the the html, css and a link to the page so you can see what it is doing, Please help. Thanks very much.

 

html

<div class="container-fluid" id="hero"><img src="images/herowords1.jpg" class="img-fluid" alt="Happy Family"></div>

 

css

#hero {
background: url(../images/herowords1.jpg) no-repeat center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

 

https://traumainchildhood.com/index1.html

    This topic has been closed for replies.

    3 replies

    B
    beng2000Author
    Known Participant
    May 14, 2022

    Thank you Ben.  I appreciate your help.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 14, 2022

    I don't know who Ben is.  😕😕

     

    quote ...don't understand the image does not reach the end of the div.

    =========

    By default, images don't scale up beyond their native file size.  This is because small pixel-based images will distort if they are upscaled too much.

     

    A better approach is to use the <picture> element with SRCSET and separate images for each device width.  This way users don't have to consume needless excess bandwidth.

     

    <picture>
  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
  <source srcset="logo-480.png, logo-480-2x.png 2x">
  <img src="logo-320.png" alt="logo">
</picture>

     

    Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      May 14, 2022

      Your html mark-up should look as below - you need a <div class="row"> </div> inside of the container-fluid <div>:

       

      <div class="container-fluid" id="hero">
      <div class="row">
      <img src="https://traumainchildhood.com/images/herowords1.jpg" class="img-fluid" alt="Placeholder image">
      </div>
      </div>

       

       

       

      You dont need any of the below if you are using an image within the html:

       

      #hero {
      background: no-repeat center center;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      }

       

      Also you should be using real text NOT text embedded in the image which can be overlaid ontop of the image.

        B
        beng2000Author
        Known Participant
        May 14, 2022

        Thank you for your help.  When I look at the site on my typical sized monitor this is what I get:

        I don't understand the image does not reach the end of the div.  Any ideas?  I did increase the width to 2000px from 1800px and still get the same results.

         

        I will figure out how to get the text onto the image properly.

         

         

        O
        osgood_
        Legend
        May 14, 2022

         

        quote

        Thank you for your help.  When I look at the site on my typical sized monitor this is what I get:

        I don't understand the image does not reach the end of the div.  Any ideas?  I did increase the width to 2000px from 1800px and still get the same results.

         

        By @beng2000

         

         

         

        Just add w-100 to the class declaration:

         

        class="img-fluid w-100"

        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        May 14, 2022

        Remove the CSS background image.  You don't need it.

        Right now, you have two images, one in the background and one in the HTML markup.  Use only 1 image, not both.

         

         

        Nancy O'Shea— Product User & Community Expert
        B
        beng2000Author
        Known Participant
        May 14, 2022

        Hi Nancy,  Went ahead and made the change.

        Please see the site now with the html and css below.

        https://traumainchildhood.com/index1.html

        I know there is padding in the bootstrap div.  Do you know how to get rid of it?

        Also, it isn't just the padding on the right side.  It is padding and something else keeping the image from being full width.

        All I want is an image to  fill the div width. Do you have any ideas? Thanks.

         

        html

        <div class="container-fluid" id="hero"><img src="images/herowords1.jpg" class="img-fluid" alt="Placeholder image"></div>

        css

        #hero {
        background: no-repeat center center;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        }

        O
        osgood_
        Legend
        May 14, 2022

        You now need to close the row <div> </div>  - see in red below where to add > and <

         

        <div class="container-fluid">
        <div class="row no-gutters"> <img src="https://traumainchildhood.com/images/herowords1.jpg" class="img-fluid" alt="Placeholder image"></div>
        </div>

         

        Also adding the class 'no-gutters' WILL give you a white space either side of the image so you need to remove that class.

         

        Bootstrap has got some weird ways, you'll find, which is why it's a poor choice to use, in my opinion. Effectively what a 'row' in Bootstrap does is it adds -15px of margin to the right and left which has the effect of offsetting the default padding set on the container divs which result in the white space you were experience. This padding of course doesnt allow anything to stretch from the left to the right edge of the browser UNLESS you insert a 'row' div.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices