Hello everyone and thanks for the help in advance. To being this post, I am a back-end app developer with limited UI experience, however, I am trying to develop a page for my daughter. I ahve a page located at https://christyforcongress.com. My problem is with the hero image, whcih appears to have an excessive “zoomed-in” type of look which I can’t seem to correct. Also, I need to fiure out a stratgey for mobile display, which I ahven’t even figured out yet. I ahve sized the image to 16:9 ratio, with this image being 1511x850 which I have read is optimal for hero images on full size display. So I am really not sure what to do from here. Are some images simply not suited for hero use or do I need to do some other time of resizing. Any help would ne appreciated.
This line says browser to enlarge background image to the size when it covers the whole block.
Learn more: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
The possible solutions are:
- Make the block taller;
- Make the image wider;
- Manually set
background-sizeto a suitable value.
First of all, thank you for the response and please forgive my ignorance. I tried making the image wider, but that didn’t seem to make any difference in the display. Setting background-size, as expected, did resize the image to smaller than the viewport with a margin. Then when I try for mobile display, I used another image 300 px wide, yet it completely overruns the emulator for 412x915 display. So I am utterly lost.
You need to choose your images carefully if you are just using the one image.
Here is a very very old demo of mine that uses a large hero image but the focal point is carefully organised so that it looks good on large and small screen,
http://www.pmob.co.uk/temp2/template1/index.html
The image is only 292k but three times the width of yours and optimised to a quality that I feel happy with. Obviously on double density devices it won’t look so clear but that’s a trade off you can make or not.
That image works because the focal point doesn’t zoom in or out much but rather you see more or less of the background as the page gets wider. Choice of image is therefore very important.
Of course you could use the picture element or srcset to supply different sized images as required but does take a lot of work to implement and is a little complex at times. If you can get away with one well optimised image at a large enough native size then it’s much easier to manage than using srcset or the picture element…
Thanks so much for the response and example. That clarified a lot for me and it tells me I’ve statred with the wrong picture, in other words the woman in the photo simply takes up too much of the image and reducing the screen size won’t work without a smaller image. Am I getting the idea? So a separate related question, when I look at the site, https://roddorilas.com/, in full screen the form is left justified and the photo is right justified. How is this accomplished since the person in the image is right of center on full screen, but becomes ceneted on smaller screens with the form overlaying the right portion of the photo. I’m trying to inspect the elements, but am thoroughly confused.
That’s just how the photo looks with the person on the right (much like my demo but in reverse).
On smaller screens the background-position is altered so that you see the right side and the left side is cut off (opposite to my example which naturally crops from the right). If you placed the image at the background-position:100% it would crop from the left when the page is squeezed.
That site is also dynamically changing the image depending on widths and is altering width and heights and using transforms to move it. However the effect is very ‘clunky’ due to the masses of html and script they are using and the large file size of the image. ( I would click away from that site after a few seconds I’m afraid. It’s just too much effect for so little reward.)
Here’s an image I just grabbed from lorem picsum where the focus is on the right.
If you change the background-position and the background-size you can change the emphasis for different screen sizes.
This is just 10 seconds work so obviously you can be more careful and more explicit if needed. (You could also move the image a little based on the height of the viewport if the head was being cut off the picture.)
On a small screen it looks like this.
But on large screen the image is at the right.
Once again, thank you for the help and great examples. Your last post make perfect sense to me, but when I try to apply some of the concepts, I’m not getting the results I expected. I tried simply resizing the photo with some transparent left and right regsions, https://christyforcongress.com/images/HeroResize.png. However, the page https://christyforcongress.com/Home/Testing basically covers the entire viewport without displaying the left and right margins of the photo. I used some very basic css width: 100vw; height: 120vh; background: url( …/images/HeroResize.png) no-repeat center center; background-size: cover;. I also experimented using background-sizing without success. I understand the image I selected may not be optimal for a hero page, but I thought trying to resize the original image and then using some other background on the left and right might make it suitable, but i am not sure how to make it work.
That’s working better except for the silly 120vh height? Why would you force a scrollbar on the viewport and make an image not fit ever? If you want full screen and the hero goes from top to bottom then it should be 100vh max and preferable min-height:100vh not height. That would also assume that you have negated margins/padding on the body and html or even 100vh will be too tall.
You set the height to 120vh so in essence the height of the image is greater than the width so therefore your transparent sections will not be seen unless the viewport height is smaller like this.
However as you can see the focal part of the image works better than the image you were using before. If you also had some extra transparent areas at the top and the bottom then the face would not loom so large on the screen. What you are effectively doing is the same as if you had used the value contain on the background image which maintains the image within the area described but then you get blank parts at one side or the other (or top or bottom depending on size). Generally that is a bad effect unless you have a background color or something else behind the image rather than just a blank space which looks broken. I would stay away from using contain for hero images.
Try and use images that have an excess of background to start with when dealing with hero images.
e.g. if the black background in this example was actually more image background then the whole thing would work better.
Image choice is really important but of course sometimes you have to work with what you have.
Edit: Just looked at your original link and the new image is better suited but I would not use ‘contain’ or you get blank spaces as mentioned. I would also consider using a max-width on the page to stop it getting too wide.
Thank you so much for what amounts to a fabulous tutorial. It took me a little while to work through some iterations, but everything you suggesed was spot on. Thank you for the help.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.