Question

我刚刚完成了个人投资组合网站的第一页。在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;
}

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

我希望有人可以帮助我

Answer 1

我认为你的意思是背景图像被切割到右边，而不是横幅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/

Answer 2

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

background-position: top left;

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

转换为响应式网页设计

2 个答案: