Question

我只是不知道背景会发生什么，在桌面上它很好，但是当我尝试调整浏览器大小或在移动设备上查看时，背景就不再存在了。

screenshot of desktop version
桌面版的屏幕截图。

screenshot of mobile version
移动版的屏幕截图。

--------- Style ----------------------

    header .menu-wrap{ background: #474749; margin-top: 20px}
    header .menu-wrap .main-menu > li{ float: right; background: #fff; border-left: 2px solid #fff; position: relative;}
    header .menu-wrap .main-menu > li:first-child{ border-right: 2px solid #fff;}
    header .menu-wrap .main-menu > li > a{ color: #fff; padding: 10px 16px; display: block; background: #474749; border-radius: 15px 0 0 0; font-size: 19px; font-family: 'Oron'}
    header .menu-wrap .main-menu > li > a:hover{ background:#fff000; color: #414042 }
    header .menu-wrap .main-menu > li:hover a{text-shadow: .0px 0px #000; }
    header .menu-wrap .main-menu > li .sub-menu{ position: absolute; background: #e6e7e8; display: none; width: auto; z-index: 9999}
    header .menu-wrap .main-menu > li .sub-menu li{ background: url(../images/bullet.png) no-repeat 130px center; padding-right: 20px; display: inline-block; float: right; width: auto; min-width: 120px;padding: 8px 18px;
-webkit-transition: all 300ms ease-out;
   -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
   -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;} 
    header .menu-wrap .main-menu > li .sub-menu li a{ display: block; margin-right: 15px}
    header .menu-wrap .main-menu > li .sub-menu li:hover{ background: url(../images/bullet.png) no-repeat 131px center #fff000; color: #414042}

--------- HTML -----------------------

                <div class="menu-wrap">
                    <div class="grid-container">
                        <ul class="main-menu">
                            <li><a href="#">אודות</a></li>
                            <li><a href="#">לימודים</a></li>
                            <li><a href="#">מרכז מידע והרשמה</a></li>
                            <li><a href="#">שירות לסטודנט</a>
                                <ul class="sub-menu">
                                    <li><a href="">עד 20 תווים 12 pt</a></li>
                                    <li><a href="">עד 20 תווים 12 pt</a></li>
                                </ul>
                            </li>
                            <li><a href="#">סגל</a></li>
                            <li><a href="#">כנסים ואירועים</a></li>
                            <li><a href="#">ספריה</a></li>
                            <li><a href="#">מחקר עיון והוצלא</a></li>
                            <li><a href="#">מעורבות חברתית</a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </div>

Answer 1

要将图像用作页面的背景附件，您可以执行以下操作：

<强> HTML 使用<body>开头下方的容器div：

<body>
  <div class="container">
     // your html code inside the container div
  </div>
</body>

<强> CSS 将背景附件放在容器div中，给div的宽度为100％而不是px，这样在每个屏幕/视口中它都会显示相同的内容：

.container {
  width: 100%;
  background: url('http://www.amazonwalls.com/wp-content/uploads/2013/06/Big-Action-Spongebob-Squarepants-Cartoon.jpg');
}

Answer 2

尝试使用boot strap主题，使用起来非常简单方便，响应式HTML的好资源之一。

http://getbootstrap.com/2.3.2/getting-started.html

CSS响应错误

2 个答案: