绝对真中心的背景图像

问题描述

我有一个网站，其中集中的背景图片在首页动画中起着至关重要的作用。

背景中心很大，直到浏览器窗口不适合宽度

这是我的身体代码：

  body {
 line-height：1; 
 margin：0px auto; 
 padding：0px; 
 background：＃90a830 url（img / bg.png）no-repeat center top; 
} 
  

图像弹出窗口从bg图像上的正确位置射出。

p> Andy

解决方案

使用您发布的代码，背景图片将始终位于屏幕中央。在小屏幕上，你想要的房子是中心屏幕;但这只有当房子在图像的中心时才会发生。所以我的建议，如果可能的话，将是在图像的每一侧有相同数量的绿草，使房子是在图像的中心。那么你不会遇到这个问题。

如果你不能改变图像，房子的中心，例如240px在中心的左边图像，你可以用屏幕上的房子中心的这样的东西：

  body {
 background：url .png）calc（50％+ 240px）0 no-repeat; 
} 
  

或者你可以使用 @media 如果您不想让图片偏离较宽屏幕的中心，请使用较小屏幕的规则。

oI have a site where a centred background image plays a vital part in a homepage animation.

The background centres great until the browser window cannot fit in the width of the site, at which point the background kind of left aligns.

This is my body code:

body {
line-height:1;
margin:0px auto;
padding:0px;
background:#90a830 url(img/bg.png) no-repeat center top;
}

The image popups shoot out from the correct place on the bg image. Try making the browser window smaller and you will see what i mean, the bg moves out of alignment.

thanks

Andy

解决方案

With the code you posted, the background image will always be centered on screen. On small screens, you want the houses to be center-screen; but this can only happen if the houses are in the center of the image. So my recommendation, if possible, would be to have the same amount of green grass on each side of the image, so that the houses are in the center of the image. Then you won't run into this problem.

If you can't change the image and the center of the houses is, say, 240px to the left of center of the image, you could center the houses on screen with something like this:

body {
    background: url(bg.png) calc(50% + 240px) 0 no-repeat;
}

Or perhaps you could just use that inside @media rules for smaller screens if you don't want the image to look off center on wider screens.

这篇关于绝对真中心的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！