Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive background image problem

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #208208
    mvosonline
    Participant

    Hi all!

    I am working on a website (url: http://michielvos.co/devrijestudent/ and have some problems with the background image of the first/landings page.

    I want the background image, header and footer to be visible at all times when resizing the browser. So I want it all to stay in the range of the current browser size but I want the map to fill out the area between the header and footer completely. So the header and footer stay in position and the map in between resizes. I have tried but for some reason I can’t seem to make this work.

    Can anybody tell me what I am doing wrong and how I can solve this!? Thnx!

    #208234
    mhodges44
    Participant

    Not entirely sure, based on your question, exactly what you need, but I think I know how to get you in the right direction and you can make tweaks from there as you see fit. In order for your header and footer to always be visible regardless of screen size, you need to give the first div in .container
    style=”position:fixed; width: 100%; top: 0;”

    That will lock your header into place. You will need to do the same with your footers.

    on .footer-kaart2 give it
    style=”position: fixed; width: 100%; bottom: 37px; z-index:100;”

    and on .bar give it
    style=”position:fixed; width: 100%; bottom: 0px; z-index: 101; background-color: white;”

    for the body and background image, on the div .background, add
    style=”position:fixed; width: 100%; top: 100px;”

    That should get you on the right track and pretty close to what you’re looking for. At that point, you will just need to add the scalability for the dots and the text in the body. Anyway, hope that helps — and hopefully I understood what you were looking for. Let me know if you have any additional questions!

    #208250
    mvosonline
    Participant

    Thnx mhodges44 your answer was really helpfull, you are a true boss! It is almost working now! :) I have a additional question, for some reason the position of the background image is not centered horizontally anymore. Do you now why background-position: center center; is not working or how I can solve this?

    .background {
    position:fixed;
    width: 100%;
    top: 100px;
    height: 80%;
    background-image:url(‘../images/kaartpage3.png’);
    background-repeat: no-repeat;
    margin: 0 auto;
    background-size: contain;
    background-position: center center;
    }

    Also another question, do you now if it is possible to give the dots a position with %? So I won’t have to use media queries for this. What do you think?

    #208251
    mhodges44
    Participant

    The background isn’t centered anymore because the width is 100%, that was my bad. It should be width: 80%. To make sure the footer does not overlap the bottom of the image, you should set
    height: calc(100vh – 143px);

    That will give you height equal to the vertical height of the window minus the heights of the header and footer.

    As to your question about positioning the dots, if they don’t have to be perfectly in place on the map, but just in the general area, yeah you can position with %. You’ll have to play around with them, and they won’t be perfect, but a starting point would be:

    .dot2 {
    top: 42%;
    left: 45.3%;
    }

    I am sure you can come up with a better solution with javascript that involves calculating the size of the background div and using some formula to calculate the top and left coordinates to set your offsets to if you really need, though.

    #208253
    mvosonline
    Participant

    Thnx your help is great! Also thnx for the suggestion for the map dots!

    The background center is now perfect, but I tried height: calc(100vh – 143px); and the footer still overlaps. Where exactly does height: calc(100vh – 143px); needs to be added?

    #208254
    mhodges44
    Participant

    No problem! Glad I could help! calc(100vh – 143px) should go on .background as well

    #208255
    mvosonline
    Participant

    Ok, I added it on the .background but when I scale my browser size the footer still overlaps.
    And when I replace it with height 80% the background is not visible anymore. Should I move the line: “height: calc(100vh – 143px);” ?

    .background {
    position:fixed;
    width: 80%;
    top: 100px;
    height: 80%;
    background-image:url(‘../images/kaartpage3.png’);
    background-repeat: no-repeat;
    margin: 0 auto;
    background-size: contain;
    background-position: center center;
    height: calc(100vh – 143px);
    }

    #208258
    mhodges44
    Participant

    You have to **replace** height:80% with height:calc(100vh-143px);
    You also might want to add a max-width of around 1100 px (maybe 1080px) to .background so that on big monitors it doesn’t get out of place. That should do the trick for you.

    #208274
    mvosonline
    Participant

    Hi mhodges44,

    When I replace the background height of 80% with height:calc(100vh-143px); the background disappears.
    Any idea what is causing this?

    #208289
    mhodges44
    Participant

    Well, the reason the background is disappearing is because it no longer has any height, because whatever browser you are using is not respecting the viewport units (vw, vh, vmin, vmax). I know for sure that it is supported in IE10+ and Chrome, but according to caniuse.com it’s supported almost everywhere.
    (http://caniuse.com/#search=viewport)

    You really have 2 options at this point.
    1. Use jQuery to calculate and set .background height
    $(“.background”).height($(window).height() – 143);
    $(window).resize(function () {
    $(“.background”).height($(this).height() – 143);
    });

    2. Use a static % and deal with potential minor overlaps on certain screen sizes.

    Using the viewport units is doing exactly what the jQuery is doing, but in CSS. However, if the browser isn’t recognizing it, you’ll have to go the javascript route. The overlaps are pretty minor, however, so if that’s something that’s a non-issue, you can resolve it with just a static % height and it will get you close enough. It really depends on what you’re looking for.

    #208290
    bearhead
    Participant

    @mvosonline

    Unless you’re using ie8, opera mini or an older android browser there shouldn’t be an issue with height: calc(100vh - 143px);

    Reviewing the code you posted, I noticed a couple of things:

    1.background-image:url(‘../images/kaartpage3.png’); You have some “fancy” quotes in there, which is incorrect syntax… in fact, you don’t even need quotes in the url.

    2. height: calc(100vh – 143px); The dash you have in calc is actually an em-dash, which is not correct, change it to a regular dash.

    I’m not sure if those sytanx issues are due to how this site rendered your code, but when I copy and pasted your code into codepen and fixed those issues, the background image showed up…

    http://codepen.io/kvana/pen/EVKXbw

    #208292
    mhodges44
    Participant

    @bearhead

    Good call on the em dash. I didn’t know why his browser wasn’t respecting the viewport units, because, like you, on all of my tests, it worked just fine.

    #209205
    mvosonline
    Participant

    A little bit late, but a BIG thnx to mhodges44, bearhead and beverleyh!
    Thnx all, this was really helpfull and it works now!

    Greetings from the Netherlands!

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.