Responsive background image problem

[mvosonline]

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!

[mhodges44]

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!

[mvosonline]

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?

[mhodges44]

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.

[mvosonline]

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?

[mhodges44]

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

[mvosonline]

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);
}

[mhodges44]

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.

[mvosonline]

Hi mhodges44,

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

[mhodges44]

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.

[bearhead]

@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

[mhodges44]

@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.

[mvosonline]

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!

[Author]

Posts