HTML, background picture height and width not scaling with percentages

Question

I'm using Webstorm software with HTML and CSS, no other plugins. I have a <section> element, which is a child of nothing but the <html> and tags. This is given an ID, in which the CSS designates the following:

#bgIMGHeadShot {
        z-index: -1;
        min-height: 25%;
        width:100%;
        background-image: url("Imgs/HeadShot.jpg");
        opacity: 1;
    }

<section class = "center" id = "bgIMGHeadShot">
    <div class = "clear trapezoid inBlock">
        <nav class = "nav">
            <button class = "left Navbtn"><a href = "Index.html">Home</a></button>
            <button class = "left Navbtn"><a href = "aboutMe.html">About Me</a></button>
            <div class = "left dropdown">
                <button class = "dropbtn"><a href = "robotics.html">Robotics</a></button>
                <nav class = "dropcontent">
                    <button><a href = "software.html">Software</a></button>
                    <button><a href = "CAD.html">CAD</a></button>
                    <button><a href = "competitons.html">Competitions</a></button>
                    <button><a href = "meetTeam.html">Meet The Team</a></button>
                </nav>
            </div>
            <button class = "left  Navbtn"><a href = "seaCadets.html">Sea Cadets</a></button>
            <button class = "left  Navbtn"><a href = "devBlog.html.html">Development Blog</a></button>
            <button class = "left  Navbtn"><a href = "thx.html">A Thank You</a></button>
        </nav>
    </div>

A lot of that HTML isn't needed for this but I'm showing you everything inside the , it's supposed to create a trapezoid over the background image that will have navigation buttons inside of it.

both the height, and width of the picture do not size proportionately to the window. I have tried to use both heights: min-height, width, min-width, and vh and vw values as well for the image. However, the image does not scale with the window and is not the correct size when first loading either. I have also tried to make this image in HTML, rather than setting it as a CSS background image, yet this does not work either. The only way I can set the size of the image is by using px values, but I want the image to scale with the browser window. What's wrong with the % or vh and vw values?

Is it the width AND height that isn't scaling or just one of them? Also, what tag is the ID under? — JackU, Mar 12 '19 at 13:42
both height and width do not scale, and HTML has been posted. — Lapras, Mar 12 '19 at 14:09

score 1 · Answer 1 · answered Mar 12 '19 at 13:53

1

I think your issue is because you trying to basically trying to define the height and width as a variable. If you set the width to 100% then the image will take up the full page size, irrelevant of what percentage you set the height.

You're best option might be use JS to set the height as percentage of width.

If you remove height from the below snippet then the image will fill 100% of the page and scale accordingly.

img {
    z-index: -1;
    height:100px;
    width: 50%;
}

<img src="https://i.imgur.com/eWtfMME.png">

answered Mar 12 '19 at 13:53

JackU

1,406
3
15
43

I've tried this fix, and it seems that the image still does not scale. – Lapras Mar 12 '19 at 14:09
@Lapras Did you want the image width to be 100% and the image retain its original scale? – JackU Mar 12 '19 at 14:10
yes, I have edited the images aspect ratio to be what I want, so theres no need to adjust scale. – Lapras Mar 13 '19 at 01:57
@Lapras why don't you set the width as what you want it to be as `%`. The image will retain its aspect ratio when the page is resized. – JackU Mar 13 '19 at 11:53

HTML, background picture height and width not scaling with percentages

1 Answers1