Need help coding my somewhat complicated website background..?

bobsaget · Jun 14, 2011

Hey guys,

I'm in the process of designing a webpage for my online startup. I have a look that I'm really liking and I need some help coding this background so it looks this way in most browsers including IE6..

I'm thinking of vertically, horizontally and tiling three different images and layering them on top of each other to achieve the background. I'm not so sure this is the best way to ensure browser compatibility.

I have all elements layered in a PSD (including the vignette!!). How would you format this background for use with all resolutions and browsers?

Thanks,

Steve

wolfofone · Jun 14, 2011

I'm guessing that your site is not fixed witdh? You might be able to use multiple divs within divs to combine the backgound, so I'm sure that would make for some messy code. I'd suggest trying out a fixed width (if possible) look and then saving the layered background in photoshop as a single .png file to make things easy

bobsaget · Jun 14, 2011

but wouldn't that make for a prettttyy big png file if I wanted to cover up to the largest of resolutions (2560x1440)? I want this thing to load fast too...

bobsaget · Jun 14, 2011

it is going to be fixed width by the way @ 960px

wolfofone · Jun 14, 2011

Hmm well if the site/content is going to be fixed width, then I would center the content and make the background say.. 1000px across or whatever, and then beyond that just have a solid color background. Otherwise, if the content is fixed width than no matter how large their display is, the content will only ever be 960px across and thus the background doesn't necessarily need to do any scaling. A background like yours would probably work better as something that isn't going to be stretched/compressed vertically/horizontally depending on the browser window and would thus look better at a fixed resolution with a matching solid background color for any resolution beyond that background image. Yeah, I'm doing a bad job of explaining what I'm on about, sorry

.

If you did want it to not be fixed width.. hmm, I'm not sure how I would do it, I'll think on it though and get back to you if I come up with something. Hopefully someone more experienced in webdev can chime in if they've done something similar with how they did it.

Deleted member 12930 · Jun 15, 2011

Basically what wolfofone said... here's some hastily written code;

in your css:

Code:

body {
background:#color url('background-image') repeat-y center;
}
#container {
margin:0 auto;
width:960px;
}
#footer {
background:#color url('footer-background') repeat-y center;
bottom:0;
position:absolute;
width:100%;
}
#footer #inner {
margin:0 auto;
width:960px;
}

your html:

Code:

<body>
<div id="container">
stuff here.
</div>
<div id="footer">
<div id="inner">footer here.</div>
</div>

The background hex colors would be the color that the background image blends out to. And the images themselves can just be 1px tall.

The footer would need tweaking to get that top border/line rule. But I'm too tired to think about that

The image would be small enough that it's probably not too costly in file size to just have the whole footer's background be one image. Not a 1px tall image.

Also, I know there are better ways to do this, and more "correct" ways. I demonstrated a method using xhtml/html4. Using html5, your html would look a bit different. Your CSS would be all the same except the selectors used.

It's also 1am and I'm exhausted. So my code may be a bit... off.

G'luck! Also, your logo is very.... milk-ish.

bobsaget · Jun 15, 2011

Thanks guys, I actually started working on this earlier and just saw your posts..

Anyway, here's what I have so far. I'm pretty happy with it and am just missing the vignette at the sides.

http://www.motioncrafter.com/

I know, my CSS may be funky. I don't really know what I'm doing... haha. But, if you go to my site, I'm getting a funky thing happening to the horizontal scroll bar. Why is it showing so wide?? And when you scroll, the "paper" BG doesn't span over!?

Here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link rel="shortcut icon" href="favicon.ico">
		<title>motioncrafter -- motion graphics for your website</title>
		<style type="text/css">
		
		
		body
		{
		margin:0px;
		padding:0px;
		line-height:8px;
		font-size:12px;
		background-image:url('images/bars1.png');
		background-repeat:repeat-x;
		background-color:#616369;
		}
		
		#wrapper
		{
		width:auto;
		height:1150px;
		}
		
		#container
		{
		postion:relative;
		margin-top:9px;
		width:auto;
		height:1004px;
		border:1px solid transparent;
		background-image:url('images/bg.jpg');
		}
		
		#centered 
		{
  		position:relative;
  		left: 50%;
 	 	margin-top:445px;
  		margin-left:-128px;
		}
		
		p.link
		{text-decoration: none;
		color:#2b2b2b;}
		</style>
		
	
		
		
		<script type="text/javascript">var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-23973253-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();</script>
	
	

</head>
	<body>
		
		<div id="wrapper">
			<div id="container">
				<div id="centered">
					<img src="images/upsoon.png" alt="motioncrafter.com - We'll be up soon...">
				</div>
			</div>
		</div>
				
	</body>
</html>

wolfofone · Jun 15, 2011

I'm really tired so take this with a grain of salt but:

try something like this:

Code:

body {
  text-align:
  margin: 0;
  padding: 0 0 15px 0;
  font-family: trebuchet ms, arial, helvetica, sans-serif;
  background: #616369 url('images/bars1.png') top center repeat-x;
  }
#wrapper {
  margin: 0 auto;
  width: 960px;
  text-align: left;
  padding: 0;
  }

heh, that may be wrong though

bobsaget · Jun 15, 2011

wolfofone said:
I'm really tired so take this with a grain of salt but:

try something like this:

Code:

body { text-align: margin: 0; padding: 0 0 15px 0; font-family: trebuchet ms, arial, helvetica, sans-serif; background: #616369 url('images/bars1.png') top center repeat-x; } #wrapper { margin: 0 auto; width: 960px; text-align: left; padding: 0; }

heh, that may be wrong though

Thanks wolf, I'll try that tomorrow. I gotta get some sleep as well.

I got the vignette working... sorta. I just need to figure out how to make it vignette onto my container div...

http://www.motioncrafter.com/

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link rel="shortcut icon" href="favicon.ico">
		<title>motioncrafter -- motion graphics for your website</title>
		<style type="text/css">
		
		
		body
		{
		margin:0px;
		padding:0px;
		line-height:8px;
		font-size:12px;
		background-image:url('images/bars1.png');
		background-repeat:repeat-x;
		background-color:#616369;
		}
		
		#wrapper
		{
		width:auto;
		height:1150px;
		}
		
		#container
		{
		postion:relative;
		margin-top:9px;
		width:auto;
		height:1004px;
		border:1px solid transparent;
		background-image:url('images/bg.jpg');
		}
		
		#vignette
		{
		postion:relative;
		width:auto;
		height:1440px;
		border:1px solid transparent;
		background-image:url('images/vignette.png');
		background-repeat:repeat-y;
		background-position:center;
		}
		
		#centered 
		{
  		position:relative;
  		left: 50%;
 	 	margin-top:445px;
  		margin-left:-128px;
		}
		
		p.link
		{text-decoration: none;
		color:#2b2b2b;}
		</style>
		
	
		
		
		<script type="text/javascript">var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-23973253-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();</script>
	
	

</head>
	<body>
		
		<div id="wrapper">
			<div id="vignette">				
				<div id="container">
					<div id="centered">
						<img src="images/upsoon.png" alt="motioncrafter.com - We'll be up soon...">
					</div>
				</div>
			</div>
		</div>
				
	</body>
</html>

Imaulle · Jun 15, 2011

your analytics should go below the </body> as with any other js you add

that left: 50% in the centered style is what is messing stuff up. for now I'd just remove the centered entirely and add this

Code:

img {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -128px;
}

Imaulle · Jun 15, 2011

mmm nevermind too late to be looking at this stuff

Deleted member 12930 · Jun 15, 2011

Imaulle said:
your analytics should go below the </body> as with any other js you add

Say what? Do you mean before the closing </body>

Also, Google now suggests placing their code before the closing </head> tag, and there are ways around the issues of placing <script> tags within the <head>. And really, unless you're building a website that's really heavy on JS, any performance boost from putting the tags at the bottom of the page are going to be negligible.

bobsaget · Jun 15, 2011

Ok guys, I got it. Not the way I originally was trying, but the file sizes are still pretty damn lean.

http://www.motioncrafter.com/

The CSS

Code:

html, body {
		margin: 0;
		padding: 0;
		height: 100%;
		}
		
		body
		{
		line-height:8px;
		font-size:12px;
		background-image:url('images/newbg.jpg');
		background-repeat:repeat-y;
		background-color:#616369;
		background-position:center;
		}
		
		#topbar
		{
		background-image:url('images/topbar.jpg');
		background-position:center;
		top:0;
		height:10px;
		position:absolute;
		width:100%;
		}
		
		#wrapper
		{
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -186px;
		}
		
		#main
		{
		overflow:auto;
		padding-bottom: 186px;
		}
		
		#content
		{
		height:auto;
		width:auto;
		}
		
		#footer
		{
    	position: relative;
   	 	margin-top: -186px;
		height:186px;
    	background-image:url('images/bottombar.jpg');
 		background-repeat:no-repeat;
		background-position:center;
		clear:both;
		}

The HTML

Code:

 <body>
	
	
	<div id="wrapper">
		<div id="main">
			<div id="content"></div>
		</div>
	</div>	
		<div id="footer"></div>
		
		<div id="topbar"></div>	
			
	</body>

Thanks for the help guys!

wolfofone · Jun 15, 2011

Glad you got it working

Imaulle · Jun 15, 2011

NickTheNut said:
Say what? Do you mean before the closing </body>

Also, Google now suggests placing their code before the closing </head> tag, and there are ways around the issues of placing <script> tags within the <head>. And really, unless you're building a website that's really heavy on JS, any performance boost from putting the tags at the bottom of the page are going to be negligible.

erm yes I meant before haha. sorry I should not make posts at 4AM

Need help coding my somewhat complicated website background..?

bobsaget

Supreme [H]ardness

wolfofone

Gawd

bobsaget

Supreme [H]ardness

bobsaget

Supreme [H]ardness

wolfofone

Gawd

Deleted member 12930

Guest

bobsaget

Supreme [H]ardness

wolfofone

Gawd

bobsaget

Supreme [H]ardness

Imaulle

[H]ard|Gawd

Imaulle

[H]ard|Gawd

Deleted member 12930

Guest

bobsaget

Supreme [H]ardness

wolfofone

Gawd

Imaulle

[H]ard|Gawd