Member Avatar for overlordlink

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
  • 77 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Veneficae
Member Avatar for Veneficae

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;
}
Member Avatar for Veneficae

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 because: Changing the wording slightly.
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.