0

I'm trying to create a responsive, full-page width hero img/banner, with some text on top.

Because I want a div on top of the img/banner, containing some text, I've chosen to use the CSS background-image property (rather than an HTML <img> element) for the image (I'm trying to avoid using position: absolute if possible).

After a lot of messing about, I seem to have found a great solution to get the background-image property to behave just like an HTML <img> element (which is exactly how I want the img to behave when resized)...

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.bg-img {
  background-image: url('https://www.bbva.com/wp-content/uploads/2016/12/Carl-Sagan-BBVA-1920x0-c-f.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 40.57%;
  /* (img-height / img-width * width) */
  /* (779 / 1920 * 100) */
}

...however, this 'roundabout' solution to get the image to behave, calls upon padding to increase the height of the bg-image container, which forces the <div> containing my text content off of the image and further down the page :(

Is there any way to resolve this without using absolute positioning on the text div to get it to sit over-top of the bg-img?

I put everything into a pen to make it easier to play with: https://codepen.io/Hacktinium/pen/VwWRBdg

Thanks in advance

Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
Hacktinium
  • 3
  • 2
  • Just curious, why are you wanting to avoid using position: absolute? – Bjorn.B Sep 30 '21 at 20:36
  • Hi, could you describe what the final result is to look like and behave? Do you want the image to stay put as the user scrolls, what element is the image the background to (html/ body, a container div...). Do you want the image to always show its full width, even though on some devices the bottom part may not be in the viewport? In that latter case do you want it to create scrolling? I wonder if cover wouldn't give a better 'hero' image look? – A Haworth Sep 30 '21 at 21:31
  • I'm under the impression position: absolute can tend to cause issues, either on its own, or in relation to trying to keep things responsive, however, I'm an absolute beginner so feel free to educate me on that if I am misinfomed. – Hacktinium Oct 01 '21 at 10:12
  • A Haworth, I believe all those questions should be answered by looking at the code I've supplied, as I said, with that CSS in-place, the image is responding exactly how I want it to. You can also see from the codepen that the BG img is the BG to a container `div` (although I suppose it doesn't need to be a div necessarily)... I'm looking to have that text positioned over-top of the image, to the left-hand side. I want Carl's face to obviously stay in view at all screen sizes. I believe when I tried 'cover' it messed that up. – Hacktinium Oct 01 '21 at 10:17
  • This is one of the only places I _do_ tend to use absolute positioning. It's narrow in scope, so it shouldn't be too difficult. – isherwood Oct 01 '21 at 13:07

1 Answers1

0

Not sure if understood 100% your desired outcome, if you want the text to be at the top of the image without using an <img> tag, why don't put the content, and the image inside a wrapper but in different divs?

I've created this pen as an example: https://codepen.io/mvuljevas-the-selector/pen/zYzbJgO

Mauricio Vuljevas
  • 16
  • 3
  • Thanks for your input Mauricio, but when I say I want the text 'on top of the image', I actually mean overlayed on top, rather than 'above'. I think my real issue here is I can't see how to keep the height of the BG img (and keep it responsive) without using padding, and that padding is what is kicking my font down off the IMG (which isn't what I want). Hopefully that makes sense? – Hacktinium Oct 01 '21 at 10:21
  • Oh, I think I get it, that's why you don't want to use the `` tag and now make sense, did you trying to change `padding-top` to `padding-bottom`?, that will preserve your background image aspect ratio as background, and will pull the content to the top, I've updated the pen: https://codepen.io/mvuljevas-the-selector/pen/zYzbJgO – Mauricio Vuljevas Oct 01 '21 at 10:59
  • That's closer, but I want to be able to position the text without having to have it tied to the bg-img `padding`, because I need the text centered vertically over the image div (approx.), rather than it be right up in that top corner. I also need it away from the left edge of the screen... With the text div's position being controlled by the bg-img's `padding` property, I can't manipulate the text's position without messing up the bg-img's `height`. – Hacktinium Oct 02 '21 at 14:41
  • I must confess that it's a not common scenario, the way you're trying to achieve it, I know that you didn't want to use `position: absolute;` for the BG container, but what about to use it for content inside it?, I've updated the pen, you can take a look, just a few lines of CSS and you can control the BG as an image without `position: absolute;` using `position: relative;` to control the content inside. – Mauricio Vuljevas Oct 02 '21 at 20:41
  • Hello Hacktinium, we're you able to solve this? – Mauricio Vuljevas Oct 24 '21 at 12:16
  • Hi Mauricio, I ended up going about it a slightly different way, but your answer in the comment above essentially did the same thing, and is a bit simpler, so thank you. I think I was coming in with not enough understanding of position absolute etc., and assuming I should try to stay away from it completely, making it unnecesarily difficult for myself! The same goes for declaring heights on elements. How can i tag your comment as the answer? I can only seem to tag the main reply as the answer (which it wasn't)? – Hacktinium Oct 25 '21 at 15:45
  • I'm glad that you could find another approach Hacktinium, wish to help in a better way next time! – Mauricio Vuljevas Oct 26 '21 at 16:10