Here is the page in progress:
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!