How to make two different div in HTML in same background image size?

Question

I want to create a website by HTML codes. I have a few questions and I have simplify the codes so that you can easily understand my problems.

my first div :

<div id="div1" style="display: none;">
<div class="h1">INFORMATION</div></div>

my second div :

<div id="div2" style="display: none;">
<div class="h1">INTERNATIONAL STUDENTS</div></div>

CSS :

body {
    background-image: url(world-map_00246938.jpg); 
    background-attachment: fixed;
    line-height: 15px;
    text-align: justify;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #FFFFFF;
    background-properties: fixed;
    }

div1 is the first appearance of website. I got a problem when I click a link to appear the div2, the background of website transform to the bigger size. But it's turn to normal size when I click a link to div 1.

The background image of website is turn to bigger size at div2 when I'd inserted an image in div2 :

<div id="div2" style="display: none;">
   <div class="h1">INTERNATIONAL STUDENTS</div>
   <center><img src="url.png"
   width=100%></center></div>

From my view, I think that the insertion of an image in div2 makes the background image of website transform to bigger size. But when I looking at my codes, I already put the background properties as a fixed.

Now, I want to find a solution that can maintain the size of my background image of website no matter what things that I inserted to that codings..

Any helps much appreciated.

Answer 1

The problem is the background-size: cover declaration, which will change the background size to cover the entire element. Removing that should cause the background image size to be the original image size.