The text is placed inside the box on my web page

Question

I have one large image as the background for my web page. The image contains a window inside the image itself. How to place text on this background image so that it fits in the field and reduces or resizes accordingly (in other resolutions when resizing the background)?

Answer 1

If you want to resize the “window” containing the text, you should be able to set the element size for the width and height values ​​based on percentages using CSS.

If you want to resize text inside an element, you may need to use JavaScript (possibly jQuery) to poll the window size at set intervals and adjust the text size based on the new window size.

Edit: To clarify, you should be able to set the size of the text box (possibly div) as a percentage of the page. For example, a div containing text can be 80% of the width of the window and 80% of its height. Then you can set the margin as “auto”. This should result in margins around the box and dimensions proportional to the width of the window.

Example:

 <style type="text/css">
    div#box {
    height: 80%;
    width: 80%;
    margin: auto;
    }
</style>
<div id="box">Text goes here.</div>

, "box" , . , , , , .

, , . , , , .

Answer 2

-, . , Javascript .

http://www.jsfiddle.net, , .

UPDATE

, jsfiddle. ... FancyBox, , Javascript, . Javascript , , .

, <div> ( ) .scrollHeight .clientHeight. , , . , , .style.fontSize.

, , :

myDiv = $('containerElement'); // Get container object using its ID
size = 50;  // Start with 50px font size

while(myDiv.scrollHeight > myDiv.clientHeight) {
  // Decrement font size until scroll is less than client
  myDiv.style.fontSize = (size - 1) + 'px';
}

, , . :

• ,
• .clientHeight,
• .offsetHeight .clientHeight

, CSS:

• overflow-x:hidden , overflow-y -
• white-space:nowrap .

, , , ( ), .

Answer 3

, , .

Try to separate the window from another bg image and use the field image as the background for the div that has the text.