Advanced Search

Results 1 to 2 of 2

Thread: Gradient background

  1. #1
    Join Date
    Oct 2012
    Location
    England
    Posts
    88
    Thanks
    24
    Thanked 2 Times in 1 Post

    Default Gradient background

    Hi, I'm pretty new to the idea of CSS and the actual code for my school website is about 1800 lines long so I'm not going to include all of it here, however I have been asked if it's possible to have a gradient background instead of the maroon we currently have:

    HTML Code:
    body {
    	font-size: 62.5%; /* Resets 1em to 10px */
    	font-family: Arial, Sans-Serif;
    	background: #720b06;
    	color: #333333;
    	text-align: center;
    	}
    I have found some gradient codes for CSS and tried to import them but they simply don't work. What I would like is marron for 10% turning into silver for 80% then back to silver for the remaining 10%.




    HTML Code:
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(right, #720B06 0%, #D4D4D4 10%, #D4D4D4 90%, #720B06 100%);
    
    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(right, #720B06 0%, #D4D4D4 10%, #D4D4D4 90%, #720B06 100%);
    
    /* Opera */ 
    background-image: -o-linear-gradient(right, #720B06 0%, #D4D4D4 10%, #D4D4D4 90%, #720B06 100%);
    
    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #720B06), color-stop(0.1, #D4D4D4), color-stop(0.9, #D4D4D4), color-stop(1, #720B06));
    
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(right, #720B06 0%, #D4D4D4 10%, #D4D4D4 90%, #720B06 100%);
    
    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to left, #720B06 0%, #D4D4D4 10%, #D4D4D4 90%, #720B06 100%);

    Taken from this website... I've tried putting the ocde together but no joy... I'm afraid :-(

    Any help would greatly be appreciated. Thanks

    http://ie.microsoft.com/testdrive/gr...ckgroundmaker/

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    The code you have works (http://jsfiddle.net/NFQrw/) so there must be something else in the css code that causes problems. It could be that there is code after that for background-image or background that overrides it.

    Could you link to the css file?
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

Similar Threads

  1. background color: gradient, transparent
    By Mejse78 in forum CSS
    Replies: 2
    Last Post: 08-06-2012, 04:44 AM
  2. Gradient Image as a Faux Column background
    By codeexploiter in forum CSS
    Replies: 0
    Last Post: 12-28-2009, 05:30 AM
  3. Help please! Extra wide favicon gradient color background
    By ruthyruth in forum Looking for such a script or service
    Replies: 2
    Last Post: 04-19-2009, 09:45 AM
  4. Creating a (linear) gradient page background
    By techno_race in forum Coding tips & tutorials threads
    Replies: 0
    Last Post: 08-13-2008, 06:21 PM
  5. css gradient help
    By Mehok in forum CSS
    Replies: 3
    Last Post: 02-21-2008, 03:44 PM

Bookmarks

Posting Permissions

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