Making Banner Auto-resizing (CSS)

I am attempting to make the banner resize automatically depending on the size of your monitor.

This is the current code:

body {
    font-family: 'PT Sans', sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #fff;
    height: 100%;
    background: #0b0b0b url({resource="settings/header_bg.png" app="core" location="global"}) no-repeat scroll center top;
    margin: 0;

I have tried some different things, but none have worked so far.

How can I accomplish this task?

2 answers

  • answered 2018-10-11 19:35 jwebb

    Use background size at 100% width. Depending on the height of your page, cover might be too tall

    body {
        font-family: 'PT Sans', sans-serif;
        font-size: 13px;
        line-height: 18px;
        color: #fff;
        height: 100%;
        background: #0b0b0b url(http://www.placekitten.com/1900/500) no-repeat scroll center top;
        background-size: 100% auto;
        margin: 0;}
    

    Edit: 100% will make the image the full width of your screen so it "resizes automatically" depending on the device/screen. The auto for the height value makes it so that your image aspect ratio is preserved because you probably wouldn't want it all stretched out right? But that does mean that your image is going to grow taller when you widen the window.

    It should also be noted that putting a heading banner as a background image on the body tag is a bit unusual. Most of the time, people put a header image in a div tag. This would allow you to set a fixed pixel height on the div that's not the whole page if you like and then you could crop part of the image if that's what you're going for.

    Like others have noted, it's really not that clear what you're trying to do and more explanation would help.

  • answered 2018-10-11 19:58 bron

    background-size: cover resizes the background image to cover the entire body, but the image may be stretched or cut.

    background-size: contain resizes the background image to make sure the image is fully visible.

    body, html {
        height: 100%;
    }
    body {
        font-family: 'PT Sans', sans-serif;
        font-size: 13px;
        line-height: 1.3846;  /*18px*/
        color: #fff;
        margin: 0;
        background-color: #0b0b0b;
        background-image: url({resource="settings/header_bg.png" app="core" location="global"});
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }
    

    Note that the first child container in the body gets a min-height:100% to enable vertical scrolling.

    <body>
      <div style="min-height:100%;">
        YOUR PAGE
      </div>
    </body>