Grow your CSS skills. Land your dream job.

Lining up with the Background

  • # April 8, 2008 at 8:55 pm

    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?

    # April 8, 2008 at 9:31 pm

    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:

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".