I was wondering if its possible to scale down the image so more of the image itself is visible within the above mentioned container? Say I can increase the container min-height to 750px or other solution?. Ideally I would prefer the whole image scaled down and sit within container only occupying half of a viewport height. The reason for that is I added a smooth scroll
html {
...
scroll-behavior: smooth;
}
and ‘about’ and ‘services’ menu items link to home page sections #about and #services which are below the image. So if the image is not too big, its not gonna be a ‘long jump’ for a user..
Your background image seems to be missing so I can’t see what effect it is having and how it should look.
We’ve talked about this before and 650px is another ‘magic number’. 650px on a mobile or even on my desktop if not maximised has no relevance to anything especially the content.
You need to revisit your logic for the page once again
If your criteria is that you want the header and that figure-text panel only to take up the whole screen height then that would need to be in a wrapper of its own and not containing all that main stuff and footer code. Then you’d have min-height 100vh wrapper with 2 rows only and the figure text row set to 1fr so it takes up all the space left over afdter the header. That would ensure figure text stays in the viewport for everyone although if the content is too tall for the viewport it will stretch as required.
It’s all about planning ahead and it may be that on your other pages you don’t have the figure text div to content with and you may want to ensure that a footer is visible on small content pages and then your original styles should be ok. So if your home page has special requirements then set a different class and structure for that page only.
You can’t throw in magic numbers like 650px and 750px and expect them to work anywhere except where you happen to be looking at that moment.
I won’t offer code yet as I believe you know how to do this but if you get stuck just shout but make sure I can see your image:)
I’ve added city and map images at the bottom of the page. I made map background transparent in GIMP but it is still visible. How can I remove (hide) the background on map image?
The image is transparent around the map edges otherwise it would show as a square block. You have solid colours for the states so they aren’t transparent. You would really need to do that in your paint package if you want those solid colours to be partially opaque.
With css you can make the whole thing transparent using opacity less than 1 but of course that will make all the image transparent including the text.
Or you can try mix-blend-mode that will give you some transparency.
There are a few other values you can try other than ‘multiply’ and ‘soft-light’ gives quite a good transparency. Add the rule I gave you and then open devtools and click the value I gave you and you can cycle through all the other values in real time to see their effect.
Sorry my wording was not really clear. What I mean is the map on background image like here https://testonconstruction.ca/ but on my map the transparent square is still visible. Interestingly enough on that website it appears the map original image has gray backgound but its not visible…
The very light gray square will be something that you left on the image so you really need to go back and do it properly in your paint package.
Here are both those images side by side and you can clearly see you have some background on one and not the other.
As I said if you messed around with the mix-blend mode you can probably get something close depending on the color underneath. If you use the value ‘lighten’ for the mix-blend-mode the gray square will get faded out without too much effect on the rest.
