• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

bootstrap responsive image full width

Contributor ,
May 14, 2022 May 14, 2022

Copy link to clipboard

Copied

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

Views

1.7K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 14, 2022 May 14, 2022

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 14, 2022 May 14, 2022

Copy link to clipboard

Copied

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;
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 14, 2022 May 14, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 14, 2022 May 14, 2022

Copy link to clipboard

Copied

First, fix your code errors.

https://validator.w3.org/nu/?doc=https%3A%2F%2Ftraumainchildhood.com%2Findex1.html

 

You're using Bootstrap 4.4.  Use the m (for margins) and p (for padding) utility classes set to 0. 

https://getbootstrap.com/docs/4.6/utilities/spacing/

 

Also give your image a width of 100% which will scale to fit all screen sizes, big & small.  NOTE: Some pixelation may occur on larger screens. Whenever possible, use Scalable Vector Graphics for web images.  SVGs retain sharp, crisp picture quality on all screen sizes.  Bitmaps (JPG, PNG) do not.

 

<div class="container-fluid">

<div class="row">

<div class="col-12 m-0 p-0">

<img style="width:100%"  src="https:/dummyimage.com/1200x300" alt="placeholder">

</div> <!--/col-->

</div><!--/row-->

</div><!--/container-->

 

image.png

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 16, 2022 May 16, 2022

Copy link to clipboard

Copied

Thank you Nancy.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 16, 2022 May 16, 2022

Copy link to clipboard

Copied

Infact you dont need anything other than the structure below:

 

<div id="hero">

<img src="images/happyfamily.jpg" class="w-100" alt="Placeholder image">

</div>

 

My advice is to use as fewer divs as possible, it makes life easier.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 14, 2022 May 14, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 14, 2022 May 14, 2022

Copy link to clipboard

Copied

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

Screenshot 2022-05-14 171246.png

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.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 14, 2022 May 14, 2022

Copy link to clipboard

Copied

 

quote

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

Screenshot 2022-05-14 171246.png

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"

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 16, 2022 May 16, 2022

Copy link to clipboard

Copied

Hello osgood. Can you point me in the right direction to place text over the responsive image that I'm using?  Much appreciated.  

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 16, 2022 May 16, 2022

Copy link to clipboard

Copied

Use Bootstrap's Carousel module.  The Carousel supports caption overlays.

https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp

 

<div class="carousel-item">
<img src="image-goes-here.jpg" alt="Description">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Lorem ipsum dolor...</p>
</div>
</div>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 16, 2022 May 16, 2022

Copy link to clipboard

Copied

quote

Hello osgood. Can you point me in the right direction to place text over the responsive image that I'm using?  Much appreciated.  


By @beng2000

 

 

If it were me I wouldn't be using Bootstrap. I would first suggest that you use a background image for your main hero image instead of an inline image because that image is going to look a bit silly on mobile devices unless you swap it out for each particular device i.e desktop, tablet and mobile

 

Set your html up as simply as below:

 

<div id="hero">
<h2>Some text goes in this space here</h2>
</div>

 

 

 

Then I would build my own css styling (see below) as its much more controllable that is Bootstraps default classes as usually that only offers a very limited range of sizing:

 

You also need to take into consideration were you are going to position the text on mobile devices because as the image decreases in size to fit on narrower screens, so does the room for the text. I suggest when the browser width gets to 850px wide the text is repositioned at the foot of the image.

 

The css below presents what I think could be a possible solution for desktop/tablet and smartphone.

 

#hero {
height: 450px;
position: relative;
background-image: url('https://traumainchildhood.com/images/happyfamily.jpg');
background-position: center -10px;
background-size: cover;
background-repeat: no-repeat;
border-top: 10px solid #028180;
}
#hero h2 {
width: 70%;
max-width: 1000px;
margin: 40px auto 0 auto;
padding: 0;
color: #000;
font-size: 40px;
}

@media screen and (max-width: 850px) {
#hero {
display: flex;
height: 350px;
background-position: center -50px;
}
#hero h2 {
position: static;
font-size: 30px;
padding: 10px;
background-color: #028180;
color: #fff;
width: 100%;
text-align: center;
align-self: end;
}
}

@media screen and (max-width: 600px) {
#hero {
height: 250px;
background-position: center -40px;
}
#hero h2 {
font-size: 22px;
}
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 16, 2022 May 16, 2022

Copy link to clipboard

Copied

The OP is already using Bootstrap though.  😕

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 16, 2022 May 16, 2022

Copy link to clipboard

Copied

LATEST
quote

The OP is already using Bootstrap though.  😕

 


By @Nancy OShea

 

Unfortunately for them, they are.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 14, 2022 May 14, 2022

Copy link to clipboard

Copied

Thank you Ben.  I appreciate your help.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 14, 2022 May 14, 2022

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines