Html Question posted in
Some basic documentation can be found here.

Html – Image in header stops scaling when resolution is too small

I’m currently working on a website and I have an image in my header. It’s a placeholder right now but the problem is when I shrink the page down to the resolution of a phone, the image stops scaling down and then starts getting cut off.This is what the website looks like on a normal resolution. Header works fine.
Here is what happens when I use inspect element to make the resolution one of a phone. Same problem happens when you look at the site on a phone.

I’ve been trying to change some header options and the image will always scale to fit the screen when its getting bigger, but it doesn’t want to scale when it gets smaller. Provided is a string of code that just has the header and the navbar. In this example code the header still has the same problem. Ignore the fact that it scales too big if you open it on fullscreen the actual full program forces it to be smaller usually.

<!DOCTYPE html>

<html lang="en" dir="ltr"> <!--Direction left to right in english-->

<head> <!--random data like faviicon, .css file location, and site name-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Works in progress</title>
    <link rel="icon" href="https://hazelhen.neocities.org/Imagess/favicontest.png">
    <link rel="stylesheet" href="https://hazelhen.neocities.org/NewLook/looks.css">
</head>

<body>
    <div id="container">
        <div id="headerArea">
            <div id="header"></div>
    </div>
    </div>
</body>
<style>
    :root {
    --header-image: url('https://hazelhen.neocities.org/Imagess/headertest.png');

    /* colors */
    --content: #43256E;
}



body {
    font-family: 'Lucida Console', "Lucida Console", monospace;
    font-size: 20px;
    margin: 0;
    background-color: #d19dfc;
    /* you can delete the line below if you'd prefer to not use an image */
    background-size: 160px;
    color: #fceaff;
    background-image: url('https://hazelhen.neocities.org/Imagess/bgrose.gif');
}

* {
    box-sizing: border-box;
}

#header {
    position: unset;
    height: 120px;
    width: auto;
    /* this is only for a background image! */
    /* if you want to put images IN the header, 
you can add them directly to the <div id="header"></div> element! */
    background-image: var(--header-image);
    background-size: cover;
}

#flex {
    display: flex;
}

</style>

Here is the header image I am using just so anyone viewing can have the same image as me

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Did some more tests and decided on using background-position: center center; and then cropped the image itself. Code although still not scaling when smaller centers at the middle, which I can deal with for now. Cropped image too so it fits more

    #header {
position: unset;
height: 120px;
width: auto;
background-image: var(--header-image);
background-size: cover;
background-position: center center;

    }


  2. 0

    Here’s a simple solution according to what I understood from your question. I have changed the background size to contain, to always contain the background. Also changed the background position/repeat behavior.

    Edit: If you still want the header background to take the full background width, you can update the #header section to the following:

    #header {
    position: unset;
    height: 120px;
    width: auto;
    /* this is only for a background image! */
    /* if you want to put images IN the header, 
you can add them directly to the <div id="header"></div> element! */
    background-image: var(--header-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

     :root {
    --header-image: url('https://hazelhen.neocities.org/Imagess/headertest.png');

    /* colors */
    --content: #43256E;
}



body {
    font-family: 'Lucida Console', "Lucida Console", monospace;
    font-size: 20px;
    margin: 0;
    background-color: #d19dfc;
    /* you can delete the line below if you'd prefer to not use an image */
    background-size: 160px;
    color: #fceaff;
    background-image: url('https://hazelhen.neocities.org/Imagess/bgrose.gif');
}

* {
    box-sizing: border-box;
}

#header {
    position: unset;
    height: 120px;
    width: auto;
    /* this is only for a background image! */
    /* if you want to put images IN the header, 
you can add them directly to the <div id="header"></div> element! */
    background-image: var(--header-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#flex {
    display: flex;
}
    <!DOCTYPE html>

<html lang="en" dir="ltr"> <!--Direction left to right in english-->

<head> <!--random data like faviicon, .css file location, and site name-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Works in progress</title>
    <link rel="icon" href="https://hazelhen.neocities.org/Imagess/favicontest.png">
    <link rel="stylesheet" href="https://hazelhen.neocities.org/NewLook/looks.css">
</head>

<body>
    <div id="container">
        <div id="headerArea">
            <div id="header"></div>
    </div>
    </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search