div background images separate when scaling to mobile - html

Question

I'm making a website using Dreamweaver CC 2015 and it's fluid grid layout. I got the design as I want it but when I resize the browser to simulate a tablet or smartphone the images do not stay together?
You can see it on this page: www.sverkel.dk

Answer 1

This is an issue with the value of background-size. You are setting it to 100%, but you should be setting it to 100% 100%. Once you fix that in the style sheet, the images will always stay together without leaving any gap between them. For example:
#midt {
background-image: url(../billeder/bgmidt.jpg);
background-repeat: no-repeat;
height: 100%;
background-size: 100% 100%;
}
Why does this happen? If background-size only gets one value, it is interpreted as the value of the width of the image, and the value of the height is set to auto. You need to specify two values so you are setting both width and height (source).
As explained in the comments below, this may cause some issues with the rounded borders not looking nice as the image is stretched.
If you can, it may be a good idea to move to a CSS-only solution (without images), that will adapt to the screen size and keep the proportions all the time. It will also save you some bandwidth as you'll stop using 100KB in images. The only con is that you may need to do some tricks to make it work in old browsers (although it doesn't seem like you need that, see JSFiddle below).
Something like this (you can also see a more in-depth sample on this JSFiddle):
body {
background: url(http://www.sverkel.dk/billeder/bg.jpg) center center;
}
.gridContainer {
width:90%;
max-width:1200px;
border-radius:10px;
box-shadow:0px 0px 16px rgba(0,0,0,0.8);
margin:auto auto;
text-align:center;
background:#e5e5e5;
}
.gridContainer #top {
background: #b4b4b4; /* Old browsers */
background: linear-gradient(to bottom, #b4b4b4 0%,#e5e5e5 100%); /* W3C */
height:125px;
border-radius:10px 10px 0px 0px;
}
.gridContainer #bund {
background: #b4b4b4; /* Old browsers */
background: linear-gradient(to bottom, #e5e5e5 0%,#b4b4b4 100%); /* W3C */
height:125px;
border-radius:0px 0px 10px 10px;
}
.gridContainer #menu {
background: #cf5858; /* Old browsers */
background: linear-gradient(to bottom, #cf5858 0%,#902727 100%); /* W3C */
height:45px;
line-height:45px;
color:rgba(255,255,255,0.9);
border-radius:10px;
margin:16px;
}
<br/>
<div class="gridContainer clearfix">
<div id="top" class="fluid"></div>
<div id="menu" class="fluid">Forside - Produkter - Priser - Om - Kontakt</div>
<div id="midt" class="fluid">Hvad så der?</div>
<div id="bund" class="fluid"></div>
</div>