0

我刚刚完成了个人投资组合网站的第一页。在 Web 开发方面，我只是一个初学者。我已将网站的宽度设置为 1600 像素，与背景图像的宽度相同。

我现在想做的是将页面转换为响应式设计。我唯一的问题是，当我将页面宽度更改为 100% 时，横幅 div 的位置向左移动，而不是在中心。

这是我的代码片段。

<body>

<div id="banner"> 
   <div class="container_12">
        <div class="grid_7 prefix_5" id="navbar">
            <ul>
              <li><a href="index.html" title="Gelo Lopez">Home</a></li>
              <li><a href="Project Management.html" title="Gelo Lopez Work" target="_blank">Portfolio</a></li>
              <li><a href="http://gelolopez.wordpress.com">Blog</a></li>
              <li><a href="/contact" title="Contact Gelo Lopez">Contact</a></li>
            </ul>
        </div>
        <div class="grid_10" id="bannertext">
            <h1>Hello!</h1>
            <div class="clear"></div>
            <p>Hi, I am Gelo Lopez, an emerging digital marketing and PR Professional. I create stories for brands. I am the social media primmadonna</>
            <p id="bannerbutton"><img src="Assets/Images/bannerbutton.png" width="171" height="44" alt="Gelo Lopez Portfolio" /></p>
        </div>     
   </div>
   </div><!--end of banner-->

CSS：

body {
width: 100%;
color: #5a5959;
font-size: 18px;
font-family: "Lao UI"; 
}

/* sections*/
#banner {
background-image: url(../Images/Banner-background.png);
height:660px;
color: #fff;
font-size: 24px;
}

我还在为 12 列使用 960 gs 模板。我决定将 container_12 div 放在 id=banner 下，以便将内容放在页面中心。

我希望有人可以帮助我

4

2 回答 2

2

我认为您的意思是背景图像被向右切断，而不是横幅 div 被“向右移动”。作为<div>块级元素将适合它的父级，在这种情况下，它body设置为 100% 宽度。

如果您对使用 CSS3 感到满意，请尝试添加background-size: contain将#banner您的背景图像缩放到内容区域的内容。

更多信息在这里：http ://www.w3schools.com/cssref/css3_pr_background-size.asp

JSFiddle在这里：http: //jsfiddle.net/davidpauljunior/LCFun/

于 2013-11-04T04:45:39.060 回答
0

您需要使用background-position CSS 标签。您可以尝试添加额外的 CSS 代码行：

background-position: top left;

此外，由于您说它是一个响应式网站，您可能会意识到您的背景可能无法填充您没有设计的屏幕尺寸。你可能需要重复背景，或者修复它……这真的是根据你的需要。在此处阅读背景重复：http: //www.w3schools.com/cssref/pr_background-repeat.asp

于 2013-11-04T04:48:35.007 回答