When the result divs are appended the size of background image increases. Though it looks like a cool effect, I am unable to figure out why it is happening. Any inputs are appreciated
You need to change background-size
to 100%… which will only affect the width of the background (there are other options for controlling height too, but unnecessary).
I think you could go a little further with this too (uncomment background-attachment
if you want the background to not scroll with the page):
body{
background-color: #c0c0c0;
background-image:url('http://blog.heartland.org/wp-content/forum/uploads/2016/02/Wikipedia-Logo.jpg');
background-position: top center;
/* background-attachment:fixed; */
background-repeat: no-repeat;
background-size:100%;
width:100%;
}
Which can be condensed to this :
body{
background: #c0c0c0 url('http://blog.heartland.org/wp-content/forum/uploads/2016/02/Wikipedia-Logo.jpg') top center fixed no-repeat;
background-size:100%;
width:100%;
}
Your css eliminated zoom issue but the initial image didn’t fit as perfect as "background-size:cover"property could. So I tried below commenting some of your CSS. Thanks for your help.
body{
background-image:url(‘http://blog.heartland.org/wp-content/forum/uploads/2016/02/Wikipedia-Logo.jpg’);
background-size:cover;
background-attachment:fixed;
/* background-position: top center; /
/ background-width:100%; /
/ background-repeat: no-repeat; /
/ width:100%; */
}
That works too.