CODEWITHSUNDEEP
css
simpatico
simpatico

Reputation: 11107

How to put together centered text and fixed image?

I have a white page with only a 500x250 textbox and an image. The page is fluid.

I'm trying to center the textbox at the center of a page, while having a picture fixed to the bottom left of the screen. I partially achieve this with the following css:

.bottom-right { /* used to fix the image to the bottom of the screen */
    bottom: 0;
    right: 0;
    position: fixed;
}

#content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50%;
    width: 500px;
    height: 250px;
    position: relative;
}

When I vertically resize the window, the image covers the textbox. I would instead like the text to go up.

Upvotes: 2

Views: 144

Answers (2)

Zuul
Zuul

Reputation: 16269

If I've understood your question correctly, you need to have the "textbox" always over the image that's fixed on the bottom-right corner.

See this working Fiddle Example!

CSS

#content {
    width: 500px;
    height: 250px;
    position: absolute;          /* this is the key */
    z-index: 1;                  /* this is the key */
    left: 50%;
    top: 50%;
    margin: -125px 0 0 -250px;
}

  • CSS position:absolute;

    What this does is to place the element #content outside the normal document flow, thus not being affected by other elements or having impact on the layout of later siblings.

  • CSS z-index:1;

    What this does is to move the element up on the document stack, thus placing it over others with a lower value (the default stack level is 0).

See the CSS absolute and fixed positioning - W3C Wiki for further details.

Upvotes: 1

Moin Zaman
Moin Zaman

Reputation: 25455

Two options I can think of:

  1. Use CSS media queries and if the viewport is less than a certain height then change the textbox height or position so the image doesn't cover it.
  2. Set a min-height around the parent div and once its less than a certain height, show a vertical scrollbar.

Upvotes: 0

Related Questions