I Just Installed Smf - Image Background Within A Table Issue i cant seem to get a background image to show on the top of the p

anwiii · February 20, 2010

here is the code i have from the start of the body to the first part of the table where i want to create either a background image where i can write some text over it and to the left. the image stretches almost 100% of the screen. here is the code i have so far....

<body>';	// Because of the way width/padding are calculated, we have to tell Internet Explorer 4 and 5 that the content should be 100% wide. (or else it will assume about 108%!)	echo '	<div id="headerarea" style="padding: 12px 30px 4px 30px;', $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' : '', '">';	// The logo and the three info boxes.	echo '		<table cellspacing="0" cellpadding="0" border="0">			<tr>				<td colspan="2" valign="bottom" style="padding: 5px; white-space: nowrap;">';	// This part is the logo and forum name.  You should be able to change this to whatever you want...	echo '					<img src="', $settings['images_url'], '/header.jpg" style="width: 1163px; float: ', !$context['right_to_left'] ? 'right' : 'left', ';" alt="" />';	if (empty($settings['header_logo_url']))		echo '					<center><big style="font-family: Segoe Print; font-weight: bold;"><big><big><big><big>BIG TEXT ON TOP OF IMAGE AND ALIGNED LEFT AND CENTERED WITH THE BOTTOM TEXT</big></big></big></big></big> <h1 style="font-family: Segoe Print; font-weight: bold;">H1 HEADER TEXT ALIGNED DIRECTLY BELOW THE TOP TEXT AND CENTERED</h1></center>';											else		echo '					<img src="', $settings['header_logo_url'], '" alt="', $context['forum_name'], '" border="0" />';	echo '				</td>

with this code, it works with firefox, but not ie. i need to get it to work with ie. in ie, it shows my image on the very top, and below the image is the text.

also, i want to center the text. imagine drawing the image in to thirds. i want to center the text at the 1/3 mark. i want it this way compared to having it centered at the 1/2 mark if you divide the image in half(if that makes sense. i hope it does)

i edited what i have like a donkey because i have always had trouble with css. when i tried to use the image as a background, the image would never show up for some reason. i tried without css and WITH css in the first table data cell.

i am really stuck and need some help. i tried working on this for two hours with no luck and it's only a freaking header

jlhaslip · February 20, 2010

Why use a table for a header area?Got a link?

anwiii · February 20, 2010

i knew someone was going to ask for the link. i wasn't ready to give out my domain just yet or what i am doing, but this is too important. the i got the theme from smf. it's the babylon theme. i liked the simplicity of it, i like blue, and the colors matched. you can view the source from the link...

onlinecheapo. com/free-product-samples-forum/

just make sure you get rid of the space when you go to it :angel:

i wanted to make the top of the page look like my domain and blog. anything that comes close though is good though. my main concern is IE. how i have it now loads up in firefox good. and for the life of me, i can't figure out how to center the text without hitting the clown the link to the image is "header.jpg"

originally, it had a small smf image which was 250px floating to the right, and "online cheapo" was written on the left. that was the original code. i illiminated the float right and increased the width to 1163px or something like that which was the pax allowed unless i wanted the td(table data) below it to move to the right. the original theme came with the table data.

i just started getting my motivation back in creating a website so this has really put a dent in things. i am far from an expert in php and css. i don't have time to learn any of that stuff anymore so it's more a learn as you go kinda thing. i did try to research my problem before posts(over two hours) and no luck. i tried using css too with no luck. it wouldn't even show the image, "header.jpg" for some reason. also, i don't think i need the else statements in that section of the code but i haven't messed around too much with the rest of the code. just trying to get my image in there where i can write text on top of it.

Why use a table for a header area?
Got a link?

Soviet Rathe · February 20, 2010

From what I can see, you want a table with an image as a background and text on top if it, correct? that's easy!

<center><table background="URL_TO_BACKGROUND" width="500" height="200"><tr><td>TEXT OR OTHER CONTENT GOES HERE.</td></tr></table></center>

That will make a table with a static background in it that you can add content over. for exact positioning you can do this:

<DIV ID="Floating" style="position: absolute; top:  0px; left: 0px; z-index:1;"><table background="URL_TO_BACKGROUND" width="500" height="200"><tr><td>TEXT OR OTHER CONTENT GOES HERE.</td></tr></table></DIV>

Edit the Top and Left values to adjust the position, if you want to position

if that background method doesn't work for you you can try this:

<div style="background-image: url(URL_TO_BACKGROUND); height: 200px; width: 500px; z-index: 1"><table width="500" height="200"><tr><td>TEXT OR OTHER CONTENT GOES HERE.</td></tr></table></div>

Hope I helped you. tell me if this isn't what you're looking for.
Edited February 20, 2010 by Soviet Rathe (see edit history)

anwiii · February 20, 2010

evidently that code wont work. it doesn't allow me to create a table without echoing it. when i do, the words show up fine, but the image is not recognized. from my research, you have to use css. but i tried doing that too and to no avail.i will try any suggestions and report back. i need specific instructions. also, that code wouldn't have been good anyway since i wan't to put the image in a cell and not the whole table :angel:should i list the code for the whole table? maybe something is interfering. i just listed the code with the top part of the table. also, to go to the site, and view the source, some of the code is hidden so that wont do much good in debugging. just to look at how i would like the output to look like....

truefusion · February 21, 2010

Where does $settings['images_url'] point to? And is the image it is suppose to load located at /images/Header.jpg? If so, then $settings['images_url'] needs to point to /images if it doesn't.

Soviet Rathe has most of what need to be done to get the image to show up in the table cell's background.

echo "<td style=\"background-image: url(" . $settings['images_url'] . "/Header.jpg);\">";

This code, however, will cause the image to loop. If you don't want it to repeat, you can use the CSS property, background-repeat, setting its value to no-repeat.

anwiii · February 21, 2010

that was a pretty good suggestion there. i tried it and tried to modify other parts of the code, but i still couldn't get it to work. that code actually made the most sense to me for some reason too. i decided to post my problem on the smf community forum as well. hopefully i can get this issue resolved.

Where does $settings['images_url'] point to? And is the image it is suppose to load located at /images/Header.jpg? If so, then $settings['images_url'] needs to point to /images if it doesn't.

Soviet Rathe has most of what need to be done to get the image to show up in the table cell's background.
echo "<td style=\"background-image: url(" . $settings['images_url'] . "/Header.jpg);\">";
This code, however, will cause the image to loop. If you don't want it to repeat, you can use the CSS property, background-repeat, setting its value to no-repeat.

Jonnyabc · February 21, 2010

As I said in the PM to anwiii, I think I've taken care of this issue (he let me physically work with the source code). I'll let you hear it from his own mouth before anyone says, "Case closed," but I managed to make it display what he said it should look (and a bit more).

anwiii, you were close to being right on this code from Soviet Rathe. However, as you will note, quotes must also be placed around the entire URL within url(). Since the default, it would seem on your PHP code is to start echo's off with single quotes, it would look like so:

echo '<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background: url(\'', $settings['images_url'], '/header.jpg\') no-repeat top right;">'

Whether or not you wish to put the background CSS data into the table, row or cell, is entirely up to you.
Edited February 21, 2010 by Jonnyabc (see edit history)

anwiii · February 21, 2010

ok. with true fusions code and with the help of jonny, i made a break through here. i also had to add a little more code and created a table for the top part where it wasn't dedicated to a table before. this allowed ie to show similar output(except for the text, but i am not worried about that now)now if you go to my website which is listed above, it shows the background image not completley centered on the right hand side if comparing that to the blocks below it. how can i fix this? the table itself is already at 100%

truefusion · February 21, 2010

now if you go to my website which is listed above, it shows the background image not completley centered on the right hand side if comparing that to the blocks below it. how can i fix this? the table itself is already at 100%

Unfortunately, due to my screen resolution, i cannot see the problem on my computer (my good monitor died a while ago and have had to resort to an old monitor, which only supports up to 1024x768). But if we look at the code Jonnyabc posted, you can change the positioning by replacing "top" and "right." In the CSS syntax, the word "top" is taking the place of "position from the top of the content;" the word "right" is taking the place of "position from the left of the content." If you want the browser to center the image you can replace "right" with "center." But if you want to provide absolute positioning, you can replace those words with measurements (e.g. 73px, 3em). You can even use negative numbers. This will of course take trial and error to get it to work the way you want it to.

anwiii · February 21, 2010

gosh durnit! that was too easy. i was way too tired last night to figure crap out. i thought i had tried that hahaha.anyway, i got everything aligned and centered, including the text. i didn't use absolute, i used relative as per jonny's suggestion and i now got the text centered.my next and final question is ideas in how to stretch the background image to 100% of the screen. the table is at 100% already and i put the image background in a td cell. the table below is at 91% only because i can't seem to stretch the background image on the top and i wanted it centered.any suggestions? this is the last question before the topic can be closed :angel:i do want to thank jonny for being a big help, and true fusion for actually delivery the right code. this is what my code looks like now. i got rid of the if and else statements. they were just a waste of code. although everything seems ok in firefox and ie, i'm wondering about other browsers....but not really that important.

<body>';		echo '		<table width="100%"> 			<tr>				<td style="background: url(\'', $settings['images_url'], '/header.jpg\') no-repeat top center;">';	// This part is the logo and forum name.  You should be able to change this to whatever you want...			echo '					<span style="position: relative; top:  -13px; left: 270px; z-index:1;">										<big style="font-family: Segoe Print; font-weight: bold;"><big><big><big><big>Online Cheapo</big></big></big></big></big><br></span>										<span style="position: relative; top:  -13px; left: 130px; z-index:1;">										<big style="font-family: Segoe Print; font-weight: bold;"><big><big>Cheap and Free Product Samples & Services Online</big></big></big></span>';															 		echo '				</td>			</tr></table><table align="center" width="91%" cellspacing="0" cellpadding="0" border="0">

truefusion · February 21, 2010

my next and final question is ideas in how to stretch the background image to 100% of the screen.

The CSS3 property background-size is currently not supported by browsers (at least to my knowledge), so it is not currently possible to stretch a background image without editing the image itself.

although everything seems ok in firefox and ie, i'm wondering about other browsers....but not really that important.

If it works in Firefox, then it will most likely show the same way in Opera, Chrome, Safari and similar. The tricky part normally deals with Internet Explorer.

echo '

<table width="100%">

<tr>

<td style="background linenums:0'><body>'; echo ' <table width="100%"> <tr> <td style="background: url(\'', $settings['images_url'], '/header.jpg\') no-repeat top center;">'; // This part is the logo and forum name. You should be able to change this to whatever you want... echo ' <span style="position: relative; top: -13px; left: 270px; z-index:1;"> <big style="font-family: Segoe Print; font-weight: bold;"><big><big><big><big>Online Cheapo</big></big></big></big></big><br></span> <span style="position: relative; top: -13px; left: 130px; z-index:1;"> <big style="font-family: Segoe Print; font-weight: bold;"><big><big>Cheap and Free Product Samples & Services Online</big></big></big></span>'; echo ' </td> </tr></table><table align="center" width="91%" cellspacing="0" cellpadding="0" border="0">

I would seriously suggest using the DIV element instead of a table. DIV elements automatically stretch to as wide as they are allowed to by the context and don't require any child elements (tr, td, ...). I would also suggest using using the H1 element instead of all of those BIG elements. For the one below it, maybe H3. If the margins make them far apart, you can adjust the margins using the CSS property, margin.

anwiii · February 22, 2010

yea, i was already thinking on the lines of stretching the image proportionately in an editor. i think i will give that a try. as far as the table, you read my mind about that and i think that will also be next on my list. whether i use div or not, i definately don't need a table. i only inserted it in a table that already existed originally before i seperated the two(which for some reason ie liked). and AGAIN you read my mind about the h1. there was a reason i used "big" originally because h1 wasn't outputing correctly. it may have to do with what's in my css file. i am also going to look in to that as well.

i just wanted something that looked ok at first so i can work on the forum itself which i have no accomplished that along with the rest of my site so i am going to take a break after today in the coding area and maybe work on content. i learned a lot in this thread and i appreciate all the help and advice.

The CSS3 property background-size is currently not supported by browsers (at least to my knowledge), so it is not currently possible to stretch a background image without editing the image itself.

If it works in Firefox, then it will most likely show the same way in Opera, Chrome, Safari and similar. The tricky part normally deals with Internet Explorer.

I would seriously suggest using the DIV element instead of a table. DIV elements automatically stretch to as wide as they are allowed to by the context and don't require any child elements (tr, td, ...). I would also suggest using using the H1 element instead of all of those BIG elements. For the one below it, maybe H3. If the margins make them far apart, you can adjust the margins using the CSS property, margin.

Sign In

I Just Installed Smf - Image Background Within A Table Issue i cant seem to get a background image to show on the top of the p

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information