Forums

Bit

Hi Folks,

This is my first post and concerns an old bashed up topic. I read the article and all the ideas, but am not able to implement it though I tried many variations.

Perhaps you have the patience and goodness to help me out.

CSS3 method did not work for me, but the jQuery works out as far as the background image is concerned, but I get stuck with the navigation part as these are also individual images I made in Fireworks and exported them as CSS slices to Dreamweaver CS5.5.

Here is a shot of the page I am working on:

http://e-junctions.com/uploads/images/1334844724-U1.jpg

I will also post the code if you so desire.

Thanks and look forward for some tips or solutions.

Bit

PS: I noticed the image link is not working, so here's another attempt:

[img]http://e-junctions.com/uploads/images/1334844724-U1.jpg[/img]

Bit

Paulie_D

Link still not working...try Photobucket or similar.

Bit

Thanks for letting me know! Here's one at Photobucket:
http://i48.photobucket.com/albums/f201/Tratecooty/home_page2_0419.jpg

Bit

chrisburton

If I could just suggest something on the design. It would probably look better if you put that banner and content up top since it's sort of blank with the sky. Anyway, just a suggestion.

kgscott284

Well, i am not sure what the issue is? Looks fine in the image....

Paulie_D

Yes, we'd have to see a link to the site to comment on what might not be working.

That, or post your code. Frankly a link is better.

Bit

Hi all,

Thank you so much for your input.

Here's a link to my site (under development), but this file is not on the server:
http://venture-wilderness.com

Therefore I 'm including the code below:
I have commented out the portion with the links and title (images), but have included the complete composition as the background image to demonstrate how it should look like.

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
<title>Full Page Background Image | jQuery</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script&gt;
<![endif]-->
<link href="with_jquery.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script&gt;
	<script>
		$(function() {   
		
			var theWindow        = $(window),
			    $bg              = $("#bg"),
			    aspectRatio      = $bg.width() / $bg.height();
			    			    		
			function resizeBg() {
				
				if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
				    $bg
				    	.removeClass()
				    	.addClass('bgheight');
				} else {
				    $bg
				    	.removeClass()
				    	.addClass('bgwidth');
				}
							
			}
			                   			
			theWindow.resize(function() {
				resizeBg();
			}).trigger("resize");
		
		});
	</script>
    </head>


<body>
  <img src="_images_comp/aero_fin.png" id="bg" alt="mountain of gold">

<!--<div id="page-wrap">
  <header>
<h1>Venture Wilderness Presents Rooftop Of The World!</h1>
</header>
<nav>
<ul>
<li><a href="#"><img src="_images_comp/home.png" class="img-nav"></a></li>
<li><img src="_images_comp/pipe.png" class="img-nav"></li>
<li><a href="#"><img src="_images_comp/treks_tours.png" class="img-nav"></a></li>
<li><img src="_images_comp/pipe.png" class="img-nav"></li>
<li><a href="#"><img src="_images_comp/about_trekking.png" class="img-nav"></a></li>
<li><img src="_images_comp/pipe.png" class="img-nav"></li>
<li><a href="#"><img src="_images_comp/services.png" class="img-nav"></a></li>
<li><img src="_images_comp/pipe.png" class="img-nav"></li>
<li><a href="#"><img src="_images_comp/contact.png" class="img-nav"></a></li>
<li><img src="_images_comp/pipe.png" class="img-nav"></li>
<li><a href="#"><img src="_images_comp/login.png" class="img-nav"></a></li>
</ul>
</nav>
<footer>
</footer>     
</div>-->
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	background: url(_images_content/brwsr_bg_blackish_color_full_width.png) repeat-y bottom left;
}/*Change names of browser background image used above and remove obselete images*/
#bg {
	/*position: fixed;*//*when called in, this function pins the picture to the bottom of the screen*/
	bottom: 0;
	left: 0;
}
.bgwidth {
	width: 100%;
}
.bgheight {
	height: 100%;
}
#page-wrap {
	position: relative;
	bottom: 0px;
}
#header {
	/*background: none;*/
	height: auto;
}
h1 {
	/*font-family: "Caviar Dreams", "BernhardFashion BT", Ebrima, sans-serif;*/	
	line-height: 5;
	/*color: #FFF;*/
	/*text-align: center;*/
	/*background: none;*/
	text-indent: -9999em;
	background: url(_images_comp/title.png) no-repeat;
}
.img-title {
	float:left;
	margin-top:805px;
	margin-left:645px;
}
#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	left: 645px;
	bottom: 0;
	width: auto;
}
	
#nav ul li {
	float: left;
}
#nav ul a {
	font-family: "Caviar Dreams", "BernhardFashion BT", Ebrima, sans-serif;
	font-size: 1.5ems;
	line-height: 3px;
	font-weight: bold;
	text-decoration: none;
	position: absolute;
	float: left;
	display: block;
}
.first {
	float:left;
	margin-bottom:0px;
	margin-right:10px;
	margin-left: 473px;
	margin-top:15px;
}
.img-nav {
	float:left;
	margin-bottom:40px;
	margin-left:px;
	padding-left:5px;
	padding-right: 5px;
	margin-top:15px;
}
.img-right {
	float:right;
	margin-top:-50px;
	margin-right:50px;
	position: absolute;
	right: 236px;
	top: 1020px;
}

#footer {
	
}
p {
	
}

I hope you can make sense out of it.

treehouse : what would you like to learn today?

Forums

Perfect Background Image