Apply Bootstrap "img-responsive" properties to a background image?

Marisa
Marisa used Ask the Experts™
on
Here is the page in progress:
https://www.stadriemblems.com/enamel-pins-gallery/

You'll see that on the very top of the page, I have two banner images that look pretty similar. I only want to use one of them, of course, but here is my predicament:

1) The first one is called up as a div class I created called "top-photo" with the image as a background image. This is ultimately what I want because I want to overlay text.
2) The second image is simply an img tag with the built in Bootstrap class of "img-responsive"


Here is what I am trying to accomplish:

1) I want the image to be called up like the first one, as a background image, so that I can overlay text.
2) But I want it to resize for smaller screens the way the second image is doing. It is resizing nicely (the height changes and the image fits the screen) because it has the "img-responsive" class applied to it. The first image isn't really resizing; it's just getting cut off.

Is there some way to apply the "img-responsive" properties to a background image?

I hope that makes sense, and thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
One option is to change the background-size from auto to cover.  Using cover is not going to act the same as your img tag set with the responsive class though.  Play with it and see if it works. The next step is to create a media query and present a different size image for different viewports.  Try cover first.
Emily PhelanUX/UI Designer

Commented:
Like Scott said, I was able to achieve results using the following:

.top-photo {
    width: 100%;
    background-image: url(/static/images/enamel-pins-sub-banner.jpg);
    background-size: cover;
    padding: 25px;
    background-position: center;
    max-height: 449px;
    min-height: 250px;
}

Open in new window

MarisaWeb Design

Author

Commented:
Thanks for these suggestions. That did help some. The image seems to be scaling a little more than it was. Not as much as I would like, but I may have to live with it. It seems I still need to change the max-height for a small screen size, which I tried to do, but it seems to not be obeying it.

I have

@media only screen and (max-width: 480px) {
		
	.top-photo {
    max-height: 100px;
}

Open in new window

     
But the height is not changing at all when I resize the viewport. Am I just making a silly mistake that I am overlooking?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
3 things.

First may be a typo from pasting here, but you are missing a closing bracket.
@media only screen and (max-width: 480px) {
		
	.top-photo {
    max-height: 100px;
    }
}

Open in new window


Next, since you specified a min-height in your default css. Since the media query is only set for the max height, you also need to either set the min height to inherit or something equal to or less than  your max height.

Lastly, load your media queries after your default.

.top-photo {
    width: 100%;
    background-image: url(https://www.stadriemblems.com/static/images/enamel-pins-sub-banner.jpg);
    background-size: cover;
    padding: 25px;
    background-position: center;
    max-height: 449px;
    min-height: 250px;
}


@media only screen and (max-width: 480px) {
		
	.top-photo {
    max-height: 100px;
    min-height: 100px;
    }
}

Open in new window

MarisaWeb Design

Author

Commented:
Thanks for looking this over, Scott.

I didn't have a closing bracket there because it wasn't the last class in that media query. I also had a .top-photo h1 and a .top-photo h3 class defined afterward. But I do have the extra closing bracket after those.

I also added the max-height property, and it still didn't work. You reminding me that there is a minimum height specified in my default css got me thinking that there is perhaps something else somewhere that is overriding this somehow, so I even put !important after the max-height (which I hate doing, but wanted to see what would happen) but it still isn't obeying the max height!

I'm at a loss here. I may just give in and go with the img tag and not have text overlaying it.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
I will look again at your site. But I have it working here

https://jsbin.com/mayajoxizi/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .top-photo {
    width: 100%;
    background-image: url(https://www.stadriemblems.com/static/images/enamel-pins-sub-banner.jpg);
    background-size: cover;
    padding: 25px;
    background-position: center;
    max-height: 449px;
    min-height: 250px;
}


@media only screen and (max-width: 480px) {
		
	.top-photo {
    max-height: 100px;
    min-height: 100px;
    }
}
  </style>
</head>
<body>
  <div class="top-photo"></div>
</body>
</html>

Open in new window

Of course, there is not anything else going on but the one div.
MarisaWeb Design

Author

Commented:
Yeah, it does seem to work there.

I have at least narrowed down the problem. NOTHING I put in that smaller media query works; it's not the max-height specifically. I changed the text color of the h1 background to red and it didn't obey that either. Than just to confirm my theory, I changed the font size to something tiny, and it also didn't obey that.
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
Must have been a copy/paste issue.  You have an extra closing bracket.

This is from your page
.top-photo {
    width: 100%;
    background-image: url(https://www.stadriemblems.com/static/images/enamel-pins-sub-banner.jpg);
    background-size: cover;
    padding: 25px;
    background-position: center;
    max-height: 449px;
    min-height: 250px;
}
        .top-photo h1 {
            font-size: 40px;
            line-height: 45px;
            font-weight: 600;
            margin-bottom: -20px;
            color: #FFFFFF;
        }

        .top-photo h3 {
            font-size: 25px;
            line-height: 37px;
            margin-bottom: -10px;
            color: #FFFFFF;
        }

        .top-photo p {
            color: #FFFFFF;
			padding-top: 8px;
		}
		}
		
@media only screen and (max-width: 480px) {
		
	.top-photo {
    max-height: 100px !important;
    min-height: 99px;
    }
		
		
      
			.top-photo h1 {
                font-size: 30px;
                line-height: 35px;
                font-weight: 600;
                margin-bottom: -20px;
                color: #000000;
            }

            .top-photo h3 {
                font-size: 20px;
                line-height: 27px;
                margin-bottom: -10px;
                font-weight: 600;
                color: #000000;
            }
        }

			
	

Open in new window


This is what it should be
.top-photo {
    width: 100%;
    background-image: url(https://www.stadriemblems.com/static/images/enamel-pins-sub-banner.jpg);
    background-size: cover;
    padding: 25px;
    background-position: center;
    max-height: 449px;
    min-height: 250px;
}
        .top-photo h1 {
            font-size: 40px;
            line-height: 45px;
            font-weight: 600;
            margin-bottom: -20px;
            color: #FFFFFF;
        }

        .top-photo h3 {
            font-size: 25px;
            line-height: 37px;
            margin-bottom: -10px;
            color: #FFFFFF;
        }

        .top-photo p {
            color: #FFFFFF;
			padding-top: 8px;
		}
	/*	} */  
		
@media only screen and (max-width: 480px) {
		
	.top-photo {
    max-height: 100px !important;
    min-height: 99px;
    }
		
		
      
			.top-photo h1 {
                font-size: 30px;
                line-height: 35px;
                font-weight: 600;
                margin-bottom: -20px;
                color: #000000;
            }

            .top-photo h3 {
                font-size: 20px;
                line-height: 27px;
                margin-bottom: -10px;
                font-weight: 600;
                color: #000000;
            }
        }

			
	

Open in new window


You can see where I commented out the extra bracket.  Here I have it working with your exact code https://jsbin.com/focetipoci/1/edit?html,output
MarisaWeb Design

Author

Commented:
Oh! I was actually under the impression that you needed an extra closing bracket between media queries. I mean, you do, but seeing as the default classes are not actually wrapped in a media query, it wasn't needed. Just a silly mistake. It does work now. Thank you so much for your patience and figuring that out!
MarisaWeb Design

Author

Commented:
Thank you again!
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
You can take out the !important too. That is not needed.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial