...

View Full Version : Resolved Background Gradient Problems



Shoot2Kill
12-23-2010, 06:09 PM
Hi, I am wanting to make the background gradient of http://scalamoosh.com to match the background gradient of http://scalamoosh.com/homepage/

I have tried copying the CSS, but with no luck. it seems to leave a line at the bottom of the page where the gradient starts again with a noticeable difference.

teedoff
12-23-2010, 07:03 PM
You do know your background image doesnt show up in IE as well right?

Shoot2Kill
12-23-2010, 07:15 PM
Yeah! It's not an image, But non-standard CSS.
It works in modern browsers such as Chrome & Firefox.

I will implement a solid-colour or an actual image for IE users, but im just trying to get this working in FF first.

Excavator
12-23-2010, 08:38 PM
Hello Shoot2Kill,
Maybe specifying that body be the size of the viewport instead of only wrapping #container will help.
Try it like this - (also added a bit that helps FF with HTML5 elements (http://nopeople.com/CSS%20tips/HTML5/index.html)) -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: -webkit-gradient(radial, 100 100, 1, 100 100, 2000, from(#672178), to(#220b28));
background: -moz-radial-gradient(0% 0%, circle farthest-corner, #672178 0%, #220b28 100%);
min-width: 500px;
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {display: block;}
#container{
width: 1000px;
margin: 0 auto;
}
.icon{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="container">
<header>
<div class="title"><h1>Scalamoosh</h1></div>
<div class="subtitle"><h2>Site Coming Soon</h2></div>
<nav>
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="uni.html">Uni</a></li>

<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</nav>
</header>
<div id="main">
<article>
<h3>Article Title</h3>
<p>Text</p>
</article>
<article>
<h3>Article Title</h3>
<p>Text</p>
</article>
<article>
<h3>Article Title</h3>
<p>Text</p>
</article>
</div>
<aside>
<section class="sidebar">
<h4>SocNet</h4>
<ul>
<li>http://twitter.com</li>
<li>http://facebook.com</li>
<li>http://youtube.com</li>
<li>http://google.co.uk</li>
</ul>
</section>
</aside>
<footer>
<section class="footer">
Copyright 2006 - 2011 Scalamoosh - All Rights Reserved
</section>
</footer>
</div>
<!-- Javascript at the bottom for fast page loading -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
<script src="js/plugins.js?v=1"></script>
<script src="js/script.js?v=1"></script>
<!--[if lt IE 7 ]><script src="js/dd_belatedpng.js?v=1"></script><![endif]-->
<script>//Google Analytics
var _gaq = [['_setAccount', 'UA-19678206-1'],['_trackPageview']];
(function(d,t)
{
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = 'http://www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s);
})
(document, 'script');
</script>
</body>
</html>

Shoot2Kill
12-23-2010, 09:16 PM
Great, thanks mate!

I could have sworn that I'd tried messing with height:100%; but must have been applying it wrong.

Thanks again, and I'm sure ill be back here before the site is finished. lol

ormondsview
12-24-2010, 10:48 AM
I'm trying for a gradient effect at the top and the reverse at the bottom, sort of like this site http://orchidsshoppe.com/gallery_4.htm The content box will display on top. Is the gradient an image and if so shall I put repeat and just slice it to the height pixels needed?
What app do people use to get design ideas? Firefox webdev or Firebug? And how would they help to discover how to do the image part? Many thanks.

Excavator
12-25-2010, 01:42 AM
I'm trying for a gradient effect at the top and the reverse at the bottom, sort of like this site http://orchidsshoppe.com/gallery_4.htm The content box will display on top. Is the gradient an image and if so shall I put repeat and just slice it to the height pixels needed?
What app do people use to get design ideas? Firefox webdev or Firebug? And how would they help to discover how to do the image part? Many thanks.


You should start your own thread to get better help.
Using Firebug you can see that's just a normal background image repeated X - http://orchidsshoppe.com/images/bg_gradient.jpg

Shoot2Kill
12-26-2010, 04:18 PM
Now i have added some extra content to the page, the gradient stops at one page height.

Is there a way i can make it gradient al the way to the bottom?

see: http://scalamoosh.com

Shoot2Kill
12-26-2010, 04:18 PM
Now i have added some extra content to the page, the gradient stops at one page height.

Is there a way i can make it gradient al the way to the bottom?

see: http://scalamoosh.com

Excavator
12-26-2010, 06:55 PM
Now i have added some extra content to the page, the gradient stops at one page height.

Is there a way i can make it gradient al the way to the bottom?

see: http://scalamoosh.com

Try it another way -
/* Primary Styles */
html, body {
font-family: 'Ubuntu';
background: -webkit-gradient(radial, 100 100, 1, 100 100, 1000, from(#672178), to(#220b28));
background: -moz-radial-gradient(0% 0%, circle farthest-corner, #672178 0%, #220b28 90%);
}
#container {
min-height: 100%;
width: 900px;
margin: 0 auto;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum