Need my header image to fit all screen sizes Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
2 posters

    Need my header image to fit all screen sizes

    avatar
    SensGrl4Life
    New Member


    Posts : 5
    Reputation : 1
    Language : English

    In progress Need my header image to fit all screen sizes

    Post by SensGrl4Life Wed 20 May - 21:23

    I use Chrome and my header fits perfectly with my screen size. In looking at other computers, tablets etc.. the header does not fit.   
    This is the logo https://2img.net/h/i636.photobucket.com/albums/uu82/JustJoJo/bkgrnd_zpsdz66ho54.png~original

    This is what my screen looks like using Chrome.
    https://2img.net/h/i636.photobucket.com/albums/uu82/JustJoJo/Image2_zpsy5kdcznq.png~original

    This is what it looks like using Chrome & Firefox on both a desktop and an Android Tablet.
    https://2img.net/h/i636.photobucket.com/albums/uu82/JustJoJo/unnamed_zpsmaqu9xk4.jpg~original

    I just want to know how to get it to fit for everyone.

    The CSS I'm using is:

    .headerbar {
      min-height:320px;
      background-color: transparent;
      background-image: url('https://2img.net/h/i636.photobucket.com/albums/uu82/JustJoJo/bkgrnd_zpsdz66ho54.png~original');
      background-position: center;
      background-repeat: no-repeat;
      background-size:cover;
     
        border: 3px solid #AB0000;
    }


    Thanks for your help!!
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    In progress Re: Need my header image to fit all screen sizes

    Post by Ange Tuteur Wed 20 May - 21:51

    Hi @SensGrl4Life,

    I see you're using background-size, so it depends on if the browser supports this CSS property. For better support, you can try using the vendor prefixes for this property.

    CSS :
    Code:
    .headerbar {
      min-height:320px;
      background-color: transparent;
      background-image: url('http://i636.photobucket.com/albums/uu82/JustJoJo/bkgrnd_zpsdz66ho54.png~original');
      background-position: center;
      background-repeat: no-repeat;
      -webkit-background-size:cover;
      -moz-background-size:cover;
      -o-background-size:cover;
      background-size:cover;
      border: 3px solid #AB0000;
    }

    If that doesn't work, I'd recommend placing the image as a logo via pics management, and then adjusting it's width with CSS. Example :
    Code:
    .headerbar img { width:100% }
    avatar
    SensGrl4Life
    New Member


    Posts : 5
    Reputation : 1
    Language : English

    In progress Re: Need my header image to fit all screen sizes

    Post by SensGrl4Life Wed 20 May - 21:59

    First option adjusts it a little...but its still not 100%
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    In progress Re: Need my header image to fit all screen sizes

    Post by Ange Tuteur Wed 20 May - 22:03

    You can adjust it a bit by changing cover to 100% or 100% 100%. The latter fits the image to the dimensions of the HTML element, so there's the possibility of the image appearing... distorted, on some displays.
    avatar
    SensGrl4Life
    New Member


    Posts : 5
    Reputation : 1
    Language : English

    In progress Re: Need my header image to fit all screen sizes

    Post by SensGrl4Life Wed 20 May - 22:26

    Will try that when I get home...thanks
    avatar
    SensGrl4Life
    New Member


    Posts : 5
    Reputation : 1
    Language : English

    In progress Re: Need my header image to fit all screen sizes

    Post by SensGrl4Life Thu 21 May - 7:02

    The width seems to be ok now.. but the height is off ...
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    In progress Re: Need my header image to fit all screen sizes

    Post by Ange Tuteur Thu 21 May - 19:54

    Personally, I would recommend that the image is placed in Display > Pics management > Advanced > Logo

    This way you'll have an easier time adjusting the image, so that the height can be automatically calculated. Background images are good, but they take up no space, so it makes it impossible to calculate the dimensions on other screens, unless you utilize numerous media queries.