Background image zooms in automatically when div elements are appended

#1

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

#2

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 :slight_smile: :

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%;
}
#3

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%; */
}

1 Like
#4

That works too. :smiley:

#5