背景图片上的图片

时间:2016-05-13 08:45:15

标签: html css image

我需要帮助,到目前为止我没有找到任何正确的答案。我想在我的网站上制作全宽度和高度的背景图像,并对任何分辨率做出反应,这是好的,但问题是当我放置其他图像时(我有7张图像超过背景img)。我放置它们并为每个分辨率设置媒体查询,只有在全屏时才可以,但是当我在浏览器中定期查看地址栏和书签栏时,它们都会混乱,甚至我的背景图片也不再是宽度和高度。抱歉英语不好。

正文CSS:

  body {
    background-image: url('images/background1.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: scroll;
    background-size: 100% 100%;
    height: 100vh;
    margin: 0px;
}

然后我将我的图像和边距 - 左,右,底部,顶部放置在媒体查询中的不同屏幕分辨率。

我是否需要为图像或其他设置正确的位置?请给我一个提示。

编辑:

This is what I get in fullscreen and it is ok

But this is when is not fullscreen

所有图像除了条带外,都是背景图像的一部分。 图像只有边缘样式,没有别的。他们是漂浮式的div。

1 个答案:

答案 0 :(得分:0)

使背景图像响应的最简单方法是:

img{
  background-image: url('.../your-image.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}