6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

[HTML] div with TEXT over IMAGE -- any solution that works on every resolution and window size?

by Mitsakis
4 replies
I have made an image background for my squeeze page
and I have a white box in this image in order to add some text with html.

which is the most reliable way to add text exactly in this position?
something that works no matter the resolution, window size, or zoom.

the page is fixed width.

I tried absolute position but when I resize the window the text goes out of place.
(and that's because it measures pixels from the top left corner.)
I then tried relative position and it worked but at the end of the page there was a big white gap.
(probably from the place this DIV belonged before reposition was applied.)

EDIT:relative position should work. I probably should put the text div inside the image div.
#div #html #image #resolution #size #solution #text #window #works
  • Profile picture of the author Jonas B
    make your container position:relative;
    put your div with text in it and make it position:absolute;
    Signature
    Proud owner of the most flexible mobile app builder. Check it out at http://bit.ly/hybrica!
    Mobile Web Expert & Android Developer
    {{ DiscussionBoard.errors[4464466].message }}
    • Profile picture of the author GetFeeDomainName
      ok, the right way to do this is to have a white box in html as well. use a full picture (without the blank spot) as background and then wrap the text in a <div> element with white background, like this
      HTML Code:
      <body style="background:url(/path/to/my/image.png)">
...
<div style="background:white; padding:20px;">
This is a block of black-on-white text on a page with a background.
</div>
...
</body>
      Signature
      {{ DiscussionBoard.errors[4480153].message }}
      • Profile picture of the author SteveJohnson
        Originally Posted by GetFeeDomainName View Post

        ok, the right way to do this is to have a white box in html as well. use a full picture (without the blank spot) as background and then wrap the text in a <div> element with white background, like this
        HTML Code:
        <body style="background:url(/path/to/my/image.png)">
...
<div style="background:white; padding:20px;">
This is a block of black-on-white text on a page with a background.
</div>
...
</body>
        You MUST be kidding...
        Signature

        The 2nd Amendment, 1789 - The Original Homeland Security.

        Gun control means never having to say, "I missed you."

        {{ DiscussionBoard.errors[4482722].message }}
  • Profile picture of the author GetFeeDomainName
    huh, why?
    OP wants to know what is the most reliable way to position a text exactly inside a margin of white background so it will work in on window sizes.
    the way to do this is by having the white margin "following" the text with the code as above. then you can position(absolute/relative) the whole white margin (div) wherever you like.
    what exactly is wrong with that?
    Signature
    {{ DiscussionBoard.errors[4485241].message }}

Trending Topics