Trying to align text with background image. If bel

2019-09-01 19:39发布

站内问答 / HTML/CSS
1593 1 4

Here is the css code I am using:

#wrapper{
 position:relative;
 width:950px;
 margin-left:auto;
 margin-right:auto
}

#content {
 text-align: left;
 padding: 0px 25px 0px 25px;
    margin-left: auto;
    margin-right: auto;
 position: absolute;
 left: 50%;
 /*half of width of element*/
 margin-left: -450px;
 height: auto;
 }

And this is the site: http://projectstratos.com/31-01-11/

Please ignore the social icons and the height issues.

To see what I mean make your browser smaller and bigger. The text moves to the right while the background image stays centered. How can I fix this?

1条回答
够拽才男人
2楼-- · 2019-09-01 20:21

I don't believe there's an actual 'fix' for the problem you're presenting. When you say that the text 'moves to the right' in reality- the text is not moving at all. Your background image is just trying to maintain itself in the center of the horizontal axis- which you're changing.

For example.. If you got Bungie's website http://www.bungie.net/Projects/Reach/default.aspx and you perform the same action. You'll get the same 'effect' that you are. The only difference is that the background of the text in their website isn't a part of the background image.

Here's what you need to do in order to 'fix' you're problem.

  1. Separate the background (planet, space, etc..) from the logo, purple box etc.
  2. Keep the space, planet, etc.. in the same spot as the background image that's there now.
  3. Take the purple box and put it in it's own div that wraps around all your content

You're code will look similar to this:

<body>
  <div id="purpleboxbackgroundimage">
    <div id="contentandtext">
      <h1>jhkljhlkjhlkj</h1>
    </div>
  </div>
</body>

I hope this helps.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)