I have a mountain image (https://www.ballymoretales.com/c1s1page/)
that I would like put a duplicate overlay image on top of. The overlay image would be just the mountain without the sky. It would have to lineup exactly on all screens. What would be the best method to use?
The first thing I would suggest is reducing the size of that image.
It is 3456 x 5184 pixels and it weighs in at 6.33mb. It is way to big in both aspects for what you are doing with it.
I reduced it to 1000 x 1500 px and then saved for web and got it down to 103kb.
The mountain image’s parent container is set to 45vw width.
The ‘Map Of Ballymore’ image below it is 387 x 500px. It’s .center1 class has the width set to 45vw. On my 20" monitor the native image size is stretching to 720 x 930px.
Likewise the mountain image on my 20" monitor (with browser window at full width) with it’s parent width at 45vw renders the image at 718 x 1077px for me.
I’m just pointing out that the mountain is way to big and scaling down while the map is scaling up.
Now, as for your question about overlaying an image. The mtn image is in the html as an <img> element. That will complicate laying another image on top of it. I do see that the mountain image and the map image both tie in to your storyline so they are part of the pages content and the <img> element is correct. As opposed to being a background image.
However, if it were set as a background image in a div you could use multiple backgrounds and laying another image on top would be easy and it positioning would be easily controlled too, by way of background-position. That’s probably what I would do with it. I think your storyline and image will still stay in tune with each other. Background images are used for decoration and add no semantic value to the page, other than the visual connection they make.
As it is now, the html <img> is setting the height of the parent div according to the images aspect ratio. When it gets moved to the parent as a bg image the height of the parent div will collapse since there will be no content holding it open.
That’s where it will get tricky. Luckily that problem has been solved with the old scaling iframe trick that uses using aspect ratio boxes.
If you make the bird-container z-index:2 and then the new :before element z-index:3 then that will place the birds between the mountain wrapper background and the new overlay. Of course to see the birds under the new overlay there will need to be transparent sections in the image overlay otherwise you can’t see through an image. You could set opacity to less than one on the overlay but that means you will see the birds underneath all parts of the image and I thought you wanted the birds to fly under a mountain section.
Just remember that within the same stacking context the positioned elements z-index will control which is on top with the higher number being nearest to the viewer.
You can’t see through an image unless you either set its opacity to less than one or if the image is made with transparent sections where you want the birds to be shown underneath.
If you want the birds on top of everything then just raise their z-index above the others.
This is why I ask.
In the name of efficiency and reducing page size, Ray has already made a huge saving by optimising your image. But is there any point loading two images of a mountain, when one will never be seen, being obscured by the top layer mountain?
All you really need on the background layer is the sky. This could possibly be created procedurally, with far fewer bites than a second mountain picture. The sky itself could be a simple gradient. For the stars, if as per your other topic, you want them twinkling, I’m sure these could be overlaid by some means.
Then for the mountain image, you need that with an alpha channel on the sky to make that part transparent.
I don’t have time to make flying birds or starry skies, so here is a very basic example to illustrate the point about the image overlay.
I made the single image of the mountain, 1000 x 1500, the same as Ray’s, put an alpha channel on the sky, so it’s transparent, then converted a PNG to WebP.
The resulting image is only about 75kb, with alpha.
As PNG it’s about 817kb, which has better browser support, but the lossless compression is inefficient with photos. WebP allows lossy compresion (better for photos) with alpha.
I can’t upload a webp here, so I had to put it in a zip. mountain.zip (74.0 KB)
The sky is a gradient background. Instead of birds or stars, I put in a simple moon object between the sky and mountain.
The whole thing is about 76kb. The way you were heading, with two oversize images would have been well in excess of 10mb.
I set the Top position for the birds in % because they are positioned Absolute in a Relative container. The % should work on all screens but it doesn’t. As the screen width narrows, the birds move downwards. As a partial workaround, I reset their heights on smaller screens. What point am I missing? Thanks.
I don’t think you can have that amount of fine control because although you are using percent on the container the actual bird image has a fixed height of 125px and obviously the smaller the screen the more the 125px takes up room.
You can make it a little better by positioning the bird at the top of its own container.
To be perfect the birds themselves would need to be defined in percentages and not use fixed px width and heights. Also there is the scaling and transform being taken into account so fine control will be very difficult to achieve.
It’s not that simple unfortunately because as this is a background image you would need to know the spect ratio of the bird image and then convert its width and height into the correct percentage aspect ratio to match the size of the bird. You would need the padding-top trick once again to maintain that aspect ratio correctly.
However your background image is actually 10 images stuck together and you animate between each of those sprites to get the illusion of movement. Therefore working out an aspect ratio that matches each of those images will be awkward (unless the 88px x 125px is the actual sprite size). That will likely also compound the animation problem in that you have to move from one image to the next smoothly
I’d need to deconstruct that whole animation and work out what goes where in order to make it truly responsive.
If I get a couple of spare hours I’ll have a look later this afternoon and see what/if can be done to make it more fluid. Unless someone else jumps in beforehand