0

Ok well basically i ended up looking across the internet till i found a site with what appeared to be the code i needed but my issue is that when i try to put anything else on my site it is hidden underneath the fullscreen image so can someon please help me?

<!DOCTYPE html>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Techmandylan's site</title>
	<style type="text/css" media="screen">
		
		
		img.bg {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
		}
		
		@media screen and (max-width: 1024px){
			img.bg {
				left: 50%;
				margin-left: -512px; }
		}
		
		div#content {
			/* This is the only important rule */
			/* We need our content to show up on top of the background */
			position: relative; 
			
			
			/* These have no effect on the functionality */
			width: 500px;
			margin: 0 auto;
			background: #fff;
			padding: 20px;
			font-family: helvetica, arial, sans-serif;
			font-size: 10pt;
			line-height: 16pt;
			-moz-box-shadow: #000 4px 4px 10px;
			-webkit-box-shadow: #000 4px 4px 10px;
		}
		
		body {
			/* These rules have no effect on the functionality */
			/* They are for styling only */
			margin: 0;
		}
	</style>
</head>

<body>

<table cellspacing="15">

<td><a href="http://www.techmandylan.ath.cx/index.html"><img src="home.png" border="0" /></a>

<td><a href="http://www.techmandylan.ath.cx/tutorials.html/"><img src="tutorials.png" border="0" /></a>

<td><a href="http://www.techmandylan.ath.cx/downloads.html"><img src="downloads.png" border="0" /></a>

</table>

<img src="e:\bg.jpg" class="bg" />

</body>

</html>
2
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by Veneficae
0

Not sure what you're applying the background image to, but if you apply it to the body you should be fine, as it'll be a background image with all content above it. Find out what your maximum supported resolution is, and tailor the background image to that resolution. Then add the following:

body {
background-image: url(e:\bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
0

Couldn't edit the post, probably as it's a day old.

Here's the code more concise if you're wanting the code to be nicer, and quicker to adjust:

body {
background: url(e:\bg.jpg) top center no-repeat fixed;
}

I'd also suggest rather than pointing to the image on another drive (assuming it is) you might want to move it into a folder more localised to the server/localhost. If it is actually in the right directory along with your other files, you don't need the full file path, you can instead just put the bg.jpg and it'll recognise it. That'll also be quicker than re-reading the drive. You can also use ../ for the browser to look for it one level above, if you decide to put it in a folder elsewhere. For example, if you had the page in a folder called 'pages' and the images in a folder called 'images' outside of the 'pages' folder, you could navigate to it by using ../images/bg.jpg.

Sorry if you knew that already, I just thought I'd put that all in just in case.

Edited by Veneficae: Changing the wording slightly.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.