Jump to content

Footer background image problem .. please help!


reflex84

Recommended Posts

Hi,I'm still struggeling to achieve this. I'm trying hard to get a footer background to work.I've got the main background on the website, although I also want a footer background. I've added some CSS codes to try get this working and I'm almost there, but I've only got 1 problem. If you look at this image image_01.jpg ...you will notice that the background image is at the footer (bottom of the page), but it is in FRONT of the page. I need that footer image to go behind my page. Its supposed to look like this image_02.jpg (I photoshopped that image to make it look like the footer background is behind the page)The HTML code I have put in goes as follows:

#container {		min-height:100%;		position:relative;			}#footer {	position:absolute;	bottom:0;	width:100%;	height:400px;			/* Height of the footer */	background-image: url(footer_test.jpg)	}

and in the body:

<div id="container">	<div id="footer">		<!-- Footer start -->		<p><strong>Footer</strong> (always at the bottom). View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>		<!-- Footer end -->	</div></div>

The div tag above, I have placed just below the last table (yes I work with tables):

</table><div id="container">	<div id="footer">		<!-- Footer start -->		<p><strong>Footer</strong> (always at the bottom). View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>		<!-- Footer end -->	</div></div></body></html>

What do I need to add? I'm not that good with writing code, so if you could give me the solution, I would appreciate it !!Please let me know...d

Link to comment
Share on other sites

try adding z-index:0; to footer, if it disappears try increasing the value z-index:1;..z-index:2; until it reappears, suggest you test in all browsers, as some render differently to others.#footer { position:absolute; bottom:0; width:100%; height:400px; /* Height of the footer */ background-image: url(footer_test.jpg)z-index:0; }

Link to comment
Share on other sites

Hi,thanks...I've added z-index:0; ... and it did dissapear like you said it might but how high can you make the z-index value?I've tried increasing the value from 1 - 10 and its still not there... any suggestions ...

Link to comment
Share on other sites

you can go as high as you like z-index:9999999; try (note z-index only works with elements using position)#container { min-height:100%; position:relative;z-index:0; }#footer { position:absolute; bottom:0; width:100%; height:400px; /* Height of the footer */ background-image: url(footer_test.jpg)/*z-index:999;*/ }Edit if the container, is containing the footer only, try setting the container to z-index:0, as the footer within it, will move back along with it. setting the footer, with lower index, will seend it back behind the footer container.

Link to comment
Share on other sites

Sorry for the late reply ... i've tried that and it hasn't worked unfortunately! ... Yes the table has all the content. (the very outer table which holds all the webpage info etc etc) ... go to www.testing123.co.za and on the home page you will see i've tried to add this footer to this page.Where would I add the z-index attribute for this table?Go to the website address quoted above and that probably will make it easier for you to see in 'view source'.....

Link to comment
Share on other sites

OK! go to table and give id ref id="main_content"<table id="main_content" width="1016" cellspacing="0" cellpadding="0" border="0" align="center">add #main_content { position: relative; z-index: 999;}the container/footer should no longer require z-index, but i have not tested in any other browser other than FireFox, so you might have to add z-index with value less than 999 to the div container only.#container {min-height:100%;position:relative;}#footer {position:absolute;bottom:0;width:100%;height:400px; /* Height of the footer */background-image: url(footer_test.jpg);}NOTE: The main reason the background image disappeared was there was no semi-colon at end of declaration.the width of 1016px is too wide for 1024px screen resolution, you have to allow for scrollbar width, which varies between browsers. Most use 960px to cater for 1024 res screen.

Link to comment
Share on other sites

Ahhhhh! Great .. it has worked!!! :-) :-)So giving the main table the ID: main_content, basically made the table a layer (like in photoshop)?You have been the best help because you have given me the answers whereas with previous topics on here, I've had replys where its a working-out process for me. I don't think some of the other gurues understand that I do battle to understand coding.Yes, I work with widescreen monitors, so I tend to make tables quite large, although I do try keep it so that theres no horizontal scrolling for smaller monitors ... but this particular client wanted quite a wide layed out website.Thanks again man! I'm slowly but surely getting the hang of this!

Link to comment
Share on other sites

BTW ... As you might have figured out, I do web design visually (layout view) ... Do you think Dreamweaver CS5 will cater for web designers like myself? I'm asking this because CS4 didn't have a LAYOUT VIEW and I couldn't design websites. Does CS5 have a layout view? I know there were a lot of complaints about CS4 ridding Layout View, so maybe they brought it back in CS5 ???I'm currently working on CS3.Let me know or if anyone else knows too...d.

Link to comment
Share on other sites

It's not really a good idea to rely on Dreamweaver's rendering of a web page anyway. Dreamweaver's engine doesn't necessarily follow standards and can appear to render pages correctly when in fact the page doesn't render correctly in a real browser. It's best to always test in a browser, not a WYSIWYG editor's layout view or design view.

Link to comment
Share on other sites

Yes I understand that dreamweaver isn't 100% 'what-you-see-is-what-you-get" ... I browse the pages always in IE explorer and Firefox to see how they appear.My question was for when I am designing websites or putting them together ... does CS5 have a layout view? like CS3 does and Dreamweaver 8 ...

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...