【问题标题】:How to set background image to keep its position while browser width is changing?如何在浏览器宽度变化时设置背景图像以保持其位置?
【发布时间】:2012-09-23 02:48:51
【问题描述】:

我想知道如何设置背景图片以保持其在此站点上的位置:http://www.jylkkari.fi/wordpress/

当您将浏览器拖动到 960 像素以下时,侧边栏的背景开始向中心移动。

我发现this Javascript 可以解决这个问题。

我仍在寻找 CSS 中是否有一种简单的方法可以在浏览器宽度超过 960 像素时保持图像居中并在低于此尺寸时保持固定?

【问题讨论】:

    标签: css background-position browser-width


    【解决方案1】:

    .......................... 定义你的身体

    min-width:980px;
    

    body{
    min-width:980px;
    }
    

    -------------对于ie

    习惯于像这样设置css

     <!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
    <![endif]-->  
    

    创建一个 css 文件

    body{width:980px;}  
    

    更多关于ie css的信息click here

    【讨论】:

    • 我知道了,但是有时间限制。
    • 你应该小心你想在哪里使用最小宽度。在 IE 中不支持。如果要在 IE 中显示页面,您还应该设置宽度
    • 您有什么建议,如何为 IE
    【解决方案2】:

    通过将width: 960px; 添加到背景语句所在的元素来执行此操作(在您的情况下,这将是body)。

    【讨论】:

      【解决方案3】:

      您可以使用媒体查询,在正文达到一定宽度时更改其 CSS:

      @media all and (max-width: 960px) {
        body {
          background-position: left center;
        }
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-07-13
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-04-16
        相关资源
        最近更新 更多