Struggling with responsive background image

Struggling with responsive background image
0

#1

Hi, guys. First time I am writing here on the forum, so I hope I ain’t posting on the wrong section :dizzy_face:

I am doing the portfolio challenge right now and having some trouble with responsiveness for the past 2 days. I wanted the image to fill the whole screen and, whenever the screen gets smaller, the image would be cropped to keep filling the whole screen. But I don’t want the image to be fixed and to be the whole page’s background, I want it to be only the header’s background and that the user is capable of scrolling down to other sections.

After some trial and error, this code solved the problem:

header {
  background: url(https://newevolutiondesigns.com/images/freebies/abstract-background-21.jpg);
  min-height: 100%;
  padding-top: 60vh;
}

header p {
  font-size: 20vh;
}

Though this gets the work done, I have some issues with this solution:

  1. I don’t understand it at all. 60hv + 20hv = 80hv. So a background image with 60hv padding and a < p> element with 20hv should fill only 80% of the screen height, right? How come it fills 100% of the screen?

  2. I don’t like it uses vh as the font size unit. I would like to write my text with px units and have its size more constant regardless of the device’s screen height

  3. There’s something really weird about using padding on the background so it can fill the whole screen. There’s gotta be a more logical way to go about it.

Here is the link to my pen, where one can see what I have done so far:

Thanks for taking the time reading and trying to help :slight_smile:


#2

The paragraph is adding a margin above. (I believe the default top and bottom margin for a paragraph element is 1em, so it is effectively adding 20vh above and below the paragraph). You can get the whole header back to 80vh by adding margin: 0 like this:

header p {
font-size: 20vh;
margin: 0;
}

If you don’t want to use padding for height, why don’t you use height or min-height for the height of the header?

header {
background: url(https://newevolutiondesigns.com/images/freebies/abstract-background-21.jpg);
min-height: 80vh;
height: 80vh;
}

Then you’d need to use padding for positioning the paragraph.

p {
font-size: 20vh;
margin: 0;
padding-top: 60vh;
}

Or if you’re really, really averse to padding you could use:

p {
position: relative;
top: 60vh;
margin: 0;
font-size: 20vh;
}

cheers,
Ali


#3

(I believe the default top and bottom margin for a paragraph element is 1em, so it is effectively adding 20vh above and below the paragraph)

Playing around with the margin settings, it looks like the paragraph element indeed has a margin-top of 1em. So it makes total sense, thanks for clarifying it. And so I guess the padding is the best solution in the end.

But one thing I still don’t understand is why do I need to specify the height as 80vh after already putting the min-height as 80vh:

header {
background: url(https://newevolutiondesigns.com/images/freebies/abstract-background-21.jpg);
min-height: 80vh;
height: 80vh;
}

Thanks for the answer and the help! :slight_smile:


#4

Thanks for asking about using both height and min-height. It’s been very useful for me because honestly, I do it out of habit. Going back a number of years not all browsers supported min-height, so web designers/developers always set height as a back-up. This is the reason I set height and min-height to the same height. It’s also the reason I should keep more up-to-date!

In the case of your header you’d need to decide what you want it to do. Do you want the option to expand for additional content? In that case min-height is suitable. Do you need the height to be always constrained to 80vh? In that case height is more appropriate.

You can use both on the understanding that min-height always overrides height where there is a conflict. For instance, if you want your header to be 80vh, but on smaller monitors you need it to be at least 500px tall even if that extends it beyond 80% of the screen height. In that case you could set it as:
height: 80vh;
min-height: 500px;

So if 80% of the height of the browser window is less than 500px the min-height rule will take over. (Sorry if this is telling you stuff you already know).

cheers,
Ali