Home/ Questions/Q 8429019
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T05:13:06+00:00

I’ve been working on this for hours, and reading over 20 articles and I

  • 0

I’ve been working on this for hours, and reading over 20 articles and I still have no idea how to do this. I have a background, in which I want text to be positioned in a certain place. Everything is fine until I view it on a monitor with a larger resolution. The background re-sizes fine, but the text is no longer in the place I want it to be.

These images hopefully will clearly describe my situation.

How I want the text to look at any resolution (this is on a 1440 x 900 monitor) http://dl.dropbox.com/u/9134840/demo/1.PNG

This is how it looks on a 1080p Monitor:
http://dl.dropbox.com/u/9134840/demo/2.PNG

 <body>
  <div id="blah">
<p id="pr">This is a paragraph!</p>
</div>
  </body>
</html>


body {background-image:url(back.jpg); background-size:cover;}
#blah{font-size:large; left:300px; top:200px; position:absolute;}

edit: I tried both suggestions, using divs and positioning the text absolutely and relatively and still a no go, the text still moves.

#contain{
position:relative;
width:7000px;
margin:0 auto;}


#blah{font-size:large; left:100px; top:200px; position:absolute;}

I’m not looking for a fixed positioning, because I’m going to be adding content so I need to scroll vertically through the page without the text moving.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Okay, I figured it out myself, big thanks to yisela for the guidance. Ultimately though, here’s what I did. I looked at a site, like yahoo.com and saw that they had everything centered and had a white background. So no matter what resolution you had, it will still look neat. With that in mind, I made sure my image was gray, and change the background to gray so it all blended in.

    Now, as for the container stuff. I placed the image in a container by itself, and centered it. Then I just set the paragraph relative to the container. That way the text will stay in the same position.

    html{  background-color:gray }

    body{ }

    #contain{
width:1280px;
height:2000px;
margin-left:auto;
margin-right:auto;
background-size:cover;
background: url(back6.png); 
}

#blah{font-size:large; left:120px; top:230px; position:relative;}



<div id="blah">

<p id="pr">This is a paragraph!</p>




</div>



</div>
  </body>
</html>

    And now..I think I’ll happily go back to c#, after this wonderful experience with CSS.

    • 0