Runescape Bits & Bytes
https://www.rsbandb.com/forums/

CSS - Image behind Text
https://www.rsbandb.com/forums/viewtopic.php?f=14&t=75839		 Page 1 of 1
Author:  hummerwar921 [ August 8th, 2009, 11:22 pm ]
Post subject:  CSS - Image behind Text
I am trying to make a piece of text that has an image behind it.

I can set the background-image property to the image I want, however, it cuts off where the text ends.

How can I make the image stay full size, with the text in the center?

Thanks.
Author:  Adbot [ August 8th, 2009, 11:22 pm ]
Post subject:  Register and login to get these in-post ads to disappear
Author:  Chief Snake [ August 9th, 2009, 4:34 am ]
Post subject:  Re: CSS - Image behind Text
You will need something like this:

<style type="text/css">
#text-wrapper {
    background: url('./yourimage.png') no-repeat;
    display: table;
    height: height of the background image;
    text-align: center;
    width: width of the background image;
}

    #text-wrapper span {
      display: table-cell;
      vertical-align: middle;
    }
</style>

<div id="text-wrapper">
    <span>This is where your text goes</span>
</div>



However as I would personally recommend avoiding the display: table; vertical alignment hack (you'd need to add some absolute positioning in IE only, to get it to work in IE), you should use padding instead, so you'll want some CSS more like this:

<style type="text/css">
#text-wrapper {
    background: url('./yourimage.png') no-repeat;
    height: height of the background image;
    text-align: center;
    width: width of the background image;
}

    #text-wrapper span {
      display: block;
      padding: as necessary until the height+width of the background is filled;
    }
</style>
Author:  Aquw VettelS 776 [ August 9th, 2009, 10:37 am ]
Post subject:  Re: CSS - Image behind Text
<div style="background:url(image url) no-repeat; height: height of image; width: width of image; text-align:center;">

<p>text here</p>

</div>
Author:  hummerwar921 [ August 9th, 2009, 2:23 pm ]
Post subject:  Re: CSS - Image behind Text
Thanks to both of you :)

This can now be locked.
Page 1 of 1 All times are UTC - 7 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/