Trying to align text with background image. If below a certain resolution the text to the left moves in. How can I fix this?

Tags: css,background,css3,wrapper,center

Problem :

Here is the css code I am using:


#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:

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?

Solution :

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 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:

  <div id="purpleboxbackgroundimage">
    <div id="contentandtext">

I hope this helps.

    CSS Howto..

    how to make smooth grayscale on hover using CSS

    How do i position a div relative to the window page (responsive css)

    How do I create a mobile version of Nav Bar [closed]

    How to set the added elements by jQuery to the behind of other element

    How to align list items

    how to properly resize navbar fixed in bootstrap

    how do I align my error message with Simple_form for Ruby on Rails?

    CSS Lining up images. Always 1px difference. Why/How?

    jquery - How to determine if a div changes its height or any css attribute?

    How to modify the CSS Properties (height width) of a div element via JQuery?

    How to adjust a div to not move when other sibling is faded out

    How to start Bootstrap carousel with the first image at each occurrence of a modal window? [closed]

    How to make vertical menu with emenu extension in Yii?

    how to design a search panel like in mashable with css only

    how to add items into a CSS based text rotator (similar to news ticker)

    How to specify another font size for IE7 and IE8

    In IE6, how to float item to right without clearing it?

    With CSS, how do you unhighlight a link after clicking a different link?

    How do I make cards of different heights fill gap in css? [duplicate]

    How do I make my links appear as images, and have them change with hover and so on?

    How to align div to center of verital and horizontal

    How do I set jQuery accordion default to unopened? And toggle open/closed?

    How to wrap text of html button with fixed width

    html, svg, css how to make mouse event not fire on transparent color

    How to design a web page with multiple color panes without tables [duplicate]

    How can i get the source of the image in one div to another?

    how can I access a css class from the appended html div?

    How to add decoration to link in CSS?

    How to adjust responsive behaviour of menu bar's elements

    How do I show my existing rails app differently on Facebook canvas