0

I have a background image with a cup of coffee (say a circle) in the center but the cup has a 100px offset toward bottom. So I want to move background about 100px toward top where background covers the whole page. But when I move the background, a white space appears from bottom. I have read this Q/A but this says nothing about this white space:

My current solution (I use 200px offset to magnify the issue):

html,body{
   height:100%
}
body{
   background-image:url('https://p300-americantownscom.netdna-ssl.com/img/article/ks-coffee-shops-1.jpg');
   background-repeat:no-repeat;
   background-size:cover;
   background-position:50% calc(50% - 200px);
}

Edit: without using calc and with pure percentage e.g. background-position:50% 60%, every thing works fine in Chrome. I have to overcome the problem of calc

Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
  • can you post more code and show the problem? – Adam Jun 02 '18 at 00:43
  • I have added the snippet with 250px offset. Please check the problem. @Adam – Ali Sheikhpour Jun 02 '18 at 01:10
  • try this "background-position:left 50% calc(50% - 250px);" I got the tip from para 8.1.3 of the W3C draft https://drafts.csswg.org/css-values-3/#calc-computed-value – ecg8 Jun 02 '18 at 01:25
  • without using `top` this cancels the top offset @ecg8 – Ali Sheikhpour Jun 02 '18 at 01:37
  • so you are tying to make the background cover 100% of the page and give it minus margin (for example `margin: -20px`) so the circle would be centered in the middle? – Adam Jun 02 '18 at 02:29
  • Yes exactly! The circle is not in center of image so I want to correct it suing offset. But the offset makes white space in bottom. @Adam Please check the code snippet I added in question. – Ali Sheikhpour Jun 02 '18 at 08:21

0 Answers0