Html 固定背景

我正在尝试设置我的页面，以便背景不会随页面滚动。但是，我想为背景图像设置一个最小尺寸，因此如果用户重新调整其窗口大小，它将不会低于我的最小尺寸，然后强制滚动…这是可能的吗？我将我的窗口设置为最小宽度1024px，因此我希望我的背景宽度始终至少为1024px

**同时我也在谈论我的背景。我的图像基本上是一个图像复制两次，但第二个图像是水平翻转的。我如何实现它，从而通过css复制它，而不是手动执行并加载一个两倍大的文件

这是我现在拥有的。它的工作环境是背景而不是滚动，但我不知道如何设置它的最小尺寸

body {
    min-width: 1024px;
    min-height: 700px;
    max-width: 1920px;
    max-height: 1080px;

    width: 90%;
    height; 90%;

    background: url(/style/images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    <!-- FOR IE -->
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

正文{
最小宽度：1024px；
最小高度：700px；
最大宽度：1920像素；
最大高度：1080px；
宽度：90%；
身高；90%；
背景：url（/style/images/bg.jpg）没有固定的重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
过滤器：progid:DXImageTransform.Microsoft.AlphaImageLoader（src='.myBackground.jpg'，sizingMethod='scale'）；
-ms过滤器：“progid:DXImageTransform.Microsoft.AlphaImageLoader（src='myBackground.jpg'，sizingMethod='scale'）”；
}

如果浏览器窗口最小化到某个阈值，您可能需要更改

背景大小

上的“

封面

”。考虑使用媒体查询：

    @media screen and (max-width: 1024px) { 
    body { background-size: 1100px; 
    (or whatever)

         }
                                          }

---

您可以用这种方式尝试背景图像

您可以做一些事情。。。第一种方法是取出“固定”财产，让一切都一成不变。你可以找到那张照片

之前：

background: url(http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg) no-repeat center center fixed;

background: url(http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg) no-repeat center center;

之后：

background: url(http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg) no-repeat center center fixed;

background: url(http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg) no-repeat center center;

接下来，您可以尝试将两个图像相邻放置，然后翻转图像使其水平，但实际上，您最好像之前那样合并和镜像这两个图像。这里有另一个发现，你确实可以把两个图像放在一起

现在，当你需要翻转一张图片并保持另一张图片不变时，有趣的部分就来了（因此，为什么只保留一张图片会更容易）。其代码如下所示：

-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
 -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";

但是，我只能在照片不是背景图像时进行翻转，在下一步中，您会发现我使用div标记为图像创建了一个容器

---

我希望您喜欢小猫。

您是否尝试过允许重复该图像？看起来你的背景也很好：身高和宽度可以提供100%的身体？你看过照片翻转属性了吗？我有，但我不知道如何用重复的背景来实现它（例如我想把一个图像显示为半个背景，然后翻转图像来填充我的其余背景），这几乎是完美的。我只是将镜像图像合并到一个文件中。我遇到的唯一问题是，当我更改窗口大小时，我的背景图像无法填充到页面底部。是的，我很喜欢这只小猫。你可能需要相应地调整高度，你是否将你的高度保持在最大值？还是用户超出了您指定的最大高度？用户超出了最大高度，我希望如果它变大，它可以调整大小（基本上是拉伸以适应最小尺寸）您可能正在处理一个更复杂的答案，该答案将涉及jQuery/Javascript，因为网站前端必须不断地重新格式化图片以跟上用户的滚动。简而言之，这是可能的，但为了保持简单，我只会使用最大高度。