The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Lining up with the Background

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #22551

    I have a design that has the content centered. The background consists of random text repeated (see attached image). I want the logo to line up with the background so that it appears as if the logo is one of the random text, just emphasized with a different color (the "goes" word on the attached image), and I want it to be set in a more or less specific place above the main content. Is there any way to do this other than aligning the content to the left instead of centered?

    Chris Coyier

    I’m certain there is a way to get this done, but I think we’ll just need a little more information. Is the repeated text background going to be real web text, or an image? Also, is the "logo" going to be real web text or an image?

    If they are both going to be images, make the repeating background text centered like:

    body { background: url(background-text.png) center center repeat; }

    Then your centered content:
    #page-wrap { width: 960px; margin: 0 auto; position: relative; }

    With position relative on the page wrap, now you can absolutely position the logo within that div (right where ever you need it) and because both that div and the repeating background are centered, it will remain in a consistent location despite the browser window size.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.