text fit inside the box in my web page

Question

I have one big image as a background to my webpage. The image contains a box inside the image itself. How would I place text on that background image such that it should fit in the box, and shrink or resize accordingly (in other resolutions when the background resizes)?

Answer 1

If you're looking to resize the "box" containing the text, you should be able to set the dimensions of the element to percentage-based width and height values with CSS.

If you want to resize the text inside the element, then you might want to consider using JavaScript (perhaps jQuery) to poll the size of the window at set intervals and adjust the text size based on the new window dimensions.

Edit: To clarify, you should be able to set the dimensions of the text box (probably a div) to be a percentage of the page. For example, the div containing the text could be 80% of the window width and 80% of its height. You can then set the margin to be "auto". This should cause the margin around the box and the dimensions to be proportional to the window width.

Example:

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

This will cause the "box" div to be centered horizontally on the page, but vertical centering is a bit trickier. You'll probably want to look at this page to figure out how to center it vertically to stay within the box in the background.

As suggested by the other individual, you could also make the box background just the background of the text's container and not the entire page background. This might be a bit easier, but I think you will still need to use the percentage-based width and height attributes and auto margin to center it nicely.

Answer 2

For starters, you can't resize a background image. Also, resizing text will need Javascript or a page refresh.

Try making an example at http://www.jsfiddle.net so people better see what you're describing.

UPDATE

Your question is still unclear and I strongly recommend jsfiddle. But if I've interpreted correctly...you're using FancyBox, which suggests you've got some Javascript running your page. Javascript can be used to find if your text is overflowing the container, and can resize it accordingly.

To do this, get your <div> (or container element) and check its .scrollHeight and .clientHeight properties. If the scroll is less than the client, the text doesn't need to be resized. If scroll is larger than the client, you can resize with the .style.fontSize property.

An untested example of what I'm describing is like this:

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';
}

You'll have to do a little legwork on this to get it to work how you like. Things to note:

• I used the dollar function to get an object, you can google it for more info
• Your container must have defined dimensions for .clientHeight to find
• You may need to try .offsetHeight instead of .clientHeight

If you're just looking to control overflow, you can use CSS:

• overflow-x:hidden or scroll or auto, overflow-y is the same
• white-space:nowrap will prevent auto text wrapping

But, once again, my answer is vague since it's not clear (with code) what you're asking.

Answer 3

The problem with your solution is that it is very unscalable, not friendly to different browsers and will cause more problems as your website expands.

Try separating the box from the other bg image and use the box image as a background for the div you have the text in.