Hi all,

 

I have kind of learned the basics of HTML through modifying existing templates and I have had this site i've tried creating from scratch going on the backburner for quite a while:

 

http://localplaymaker.com

 

There are many imperfections to it which need updating but main concern at the moment is with the black image at the bottom of the footballer silhouette. Its currently set as the background image so if the browser window is resized vertically the image moves up into the page overlapping the main content.

 

I guess I need to set a fixed height and lock the image to the bottom of the page? but then what about compatibility across different resolutions? particularly on laptops for instance.

 

Is this workable? and if so what particular method do you think would work best? im going to keep the template constant throughout the site with a box in the middle of the page for main content, maybe a navbar above the box and a newsfeed on the left.

 

Any advice on where to start with this is greatly appreciated!!

 

Sam

As suggested you can lock the image to the foot of the page by using similar code to this:

	Position:fixed;
	Bottom:0;
	Left:0;
	Width:100%;
	Height:100px;
	Background-image:url('../images/images/background.png');

(this would sit in the CSS file) and would keep the image at the bottom of the page. Cross browser compatibility I am unsure about as your image repeats if you zoom out far enough

Thanks for your reply Junior however the problem is that if you make the browser window smaller vertically then the image moves up whether i have position set as fixed or absolute. When i set the height to say 800 the image moves up the page, i think this is possibly because the background image is only 450px in height with no whitespace above it, I have bottom set to 0 which should pull it to the bottom?. I guess i could add whitespace to the top of the background image and set the height up? doesn't really seem optimal though.