Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts

    Question Background Gradient Problems

    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.
    Last edited by Shoot2Kill; 12-23-2010 at 09:16 PM. Reason: Resolved!
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You do know your background image doesnt show up in IE as well right?

  • #3
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    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.
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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) -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    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
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #6
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by ormondsview View Post
    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 -
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    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
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #9
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    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
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Shoot2Kill View Post
    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 -
    Code:
    /* 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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Shoot2Kill (12-28-2010)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •