Smaller div when resizing the window

1

Hi, so the problem is a bit more complicated than what the title says.
I have a div with a h1 that also includes a picture as text background. I resized everything so that the picture is nice and big, and the h1 shows at the bottom, with a horizontal semi-transparent bar.
I made this project on my widescreen, so now I would like to optimize it for smaller screens (in fact if you don’t have a widescreen, the pictures and side menu will probably be all jigglypiggly :slight_smile:
I tried various things to resize the h1+picture when the window is smaller, and now I have removed them because it wasn’t quite working: all I get is that the image is resized, but the semi-transparent background of the h1 doesn’t follow, it stays the same size.
If I use bootstrap and image-resize class, when it gets a bit too small the text messes up as well (can’t see the bottom half), even though the semi-transparent background is the correct size.

This is my projec. Sorry if it’s unpolished, it’s my first ever:

Thank you in advance!

2

Hi there! My 2 cents.

I have no a clear idea of what you actually want to achieve, but may be these inputs can help you get closer.

First of all, in the HTML filed I’d use the css links in the Pen options for CSS (the little gear icon in the CSS field title), and I’d get rid of the body tags, since they’re not necessary in codepen.

Second, I don’t see the need for a whitespace ( ) before the title, nor the height of it. I think is better to use only paddings and width.

h1 {
  background-color: rgba(124, 33, 0, 0.5);
  font-family: Playfair Display;
  text-align: left;
  color: white;
  margin: auto;
  width: 50%;
  padding: 5px;
}

And finally, if you want to have the image right above the h1, I’d put them one after the other rather than nested.

HTML

  <div class="beach-boys image-responsive"></div>
  <h1>THE BEACH BOYS</h1>

CSS

.beach-boys {
  background-image: url(https://i.imgur.com/JxZSgqe.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  margin: auto;
  max-height: 707px;
  height: 100vh;
  width: 50%;
  margin-top: 1%;
}

Hope this helps! Regards.

3

Hi, thank you so much for your input!

That might be a good solution in case I can’t figure it out, however it’s not exactly what I wanted to achieve, I’m sorry if I didn’t explain it properly. I would like the text to be ON the image, not just after the image, it should just be at the bottom of the image. I managed to do that, however the problem is that when resizing the window I haven’t found an appropriate solution for adjusting the width of both the div image and h1 background. What I managed to achieve up until now is either use bootstrap with image-responsive (but then when the screen or window is fairly small, the text is cut in half horizontally), or leave out image-responsive, but then with the code I used the image gets resized, but not the h1 background.

4

Hey. Try using a background-image instead of an image (like @pablosotov suggested) and some flexbox classes (directly from Bootstrap 4) to help you positioning the <h1>; then you won’t need all those other rules you gave it but only two declarations:

HTML

<div class="beach-boys d-flex align-items-end"> // d-flex -> display:flex; align-items-ends -> align-items: end;
  <h1>THE BEACH BOYS</h1>
</div>

CSS

.beach-boys {
  min-height:50vh; /* Adjust this as you prefer */
  background-image:url(https://www.dropbox.com/s/vcrzfcsbyg1wpsi/beachboys.jpg?dl=1);
  background-position:top center;
  background-size:cover;
  background-repeat:no-repeat;
}
h1 {
  background-color: rgba(124, 33, 0, 0.5);
  font-family: Playfair Display;
  color: white;
  margin: 0;
  flex: 1;
}