Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to change background color to a gradient
New Posts  All Forums:Forum Nav:

How to change background color to a gradient

post #1 of 11
Thread Starter 
i want to make my backgorund color a gradient one, so i tried putting a gradient image in the CSS under background, but it's not working..
Quote:
body {
margin : 0px 0px 0px 0px;
background-color:<ss:image source="$templateSet.images['black.jpg']"/>;
align : center;
}
(the "ss:" is just an internal code from within my ecommerce provider)
post #2 of 11
Heh... check this page out, change the box (Height / Width) to the size of your page, and then view-source... not a fun thing to code...
http://www.designdetector.com/demos/...nts-demo-3.php

Its not really practical to do LOL...

Here's a snippet of the box at 800x600
Code:
<!-- By Christopher Hester 13 October 2005 --><style type="text/css">
* {
margin:0;
padding:0;
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
}
div {
height:1px;
width:800px;
}
#g1 {
position:absolute;
top:45px;
left:10px;
z-index:1;
}
#formdiv {
position:fixed;
top:0;
left:0;
width:100%;
height:19px;
z-index:2;
}
legend {display:none;}
input {width:3em;}
fieldset {
border-top:3px solid #ddd;
border-right:3px solid #999;
border-bottom:3px solid #777;
border-left:3px solid #bbb;
background-color:#eee;
padding:4px 4px 5px 4px;
}
#d1 {background-color:rgb(255,255,0)}
#d2 {background-color:rgb(255,255,0)}
#d3 {background-color:rgb(255,254,0)}
#d4 {background-color:rgb(255,254,0)}
#d5 {background-color:rgb(255,253,0)}
#d6 {background-color:rgb(255,253,0)}
#d7 {background-color:rgb(255,252,0)}
#d8 {background-color:rgb(255,252,0)}
#d9 {background-color:rgb(255,252,0)}
#d10 {background-color:rgb(255,251,0)}
#d11 {background-color:rgb(255,251,0)}
#d12 {background-color:rgb(255,250,0)}
#d13 {background-color:rgb(255,250,0)}
#d14 {background-color:rgb(255,249,0)}
#d15 {background-color:rgb(255,249,0)}
#d16 {background-color:rgb(255,249,0)}
#d17 {background-color:rgb(255,248,0)}
#d18 {background-color:rgb(255,248,0)}
#d19 {background-color:rgb(255,247,0)}
#d20 {background-color:rgb(255,247,0)}
#d21 {background-color:rgb(255,247,0)}
#d22 {background-color:rgb(255,246,0)}
#d23 {background-color:rgb(255,246,0)}
#d24 {background-color:rgb(255,245,0)}
#d25 {background-color:rgb(255,245,0)}
#d26 {background-color:rgb(255,244,0)}
#d27 {background-color:rgb(255,244,0)}
#d28 {background-color:rgb(255,244,0)}
#d29 {background-color:rgb(255,243,0)}
#d30 {background-color:rgb(255,243,0)}
#d31 {background-color:rgb(255,242,0)}
#d32 {background-color:rgb(255,242,0)}
#d33 {background-color:rgb(255,241,0)}
#d34 {background-color:rgb(255,241,0)}
#d35 {background-color:rgb(255,241,0)}
#d36 {background-color:rgb(255,240,0)}
#d37 {background-color:rgb(255,240,0)}
#d38 {background-color:rgb(255,239,0)}
#d39 {background-color:rgb(255,239,0)}
#d40 {background-color:rgb(255,238,0)}
#d41 {background-color:rgb(255,238,0)}
#d42 {background-color:rgb(255,238,0)}
#d43 {background-color:rgb(255,237,0)}
#d44 {background-color:rgb(255,237,0)}
#d45 {background-color:rgb(255,236,0)}
#d46 {background-color:rgb(255,236,0)}
#d47 {background-color:rgb(255,235,0)}
#d48 {background-color:rgb(255,235,0)}
#d49 {background-color:rgb(255,235,0)}
#d50 {background-color:rgb(255,234,0)}
#d51 {background-color:rgb(255,234,0)}
#d52 {background-color:rgb(255,233,0)}
#d53 {background-color:rgb(255,233,0)}
#d54 {background-color:rgb(255,232,0)}
#d55 {background-color:rgb(255,232,0)}
#d56 {background-color:rgb(255,232,0)}
#d57 {background-color:rgb(255,231,0)}
#d58 {background-color:rgb(255,231,0)}
#d59 {background-color:rgb(255,230,0)}
#d60 {background-color:rgb(255,230,0)}
It goes on to d600 BTW... and then there's all the 600 DIVs in there...
    
CPUMotherboardGraphicsRAM
Pentium D - 915 @ 2.8gHz Intel D946GZis GeForce 9500GT 1gb DDR2 
Optical DriveOSCase
DVD/RW WinXP Home SP3 Rosewill Cheapie 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
Pentium D - 915 @ 2.8gHz Intel D946GZis GeForce 9500GT 1gb DDR2 
Optical DriveOSCase
DVD/RW WinXP Home SP3 Rosewill Cheapie 
  hide details  
Reply
post #3 of 11
just use background-image!! why in the world are you using background color?

background-image:url("pathtoimage.jpg")

unless i am missing something about why you would want to go this route
    
CPUMotherboardGraphicsRAM
E6400 @ 3.6 GHz (450X8) GA P965 S3 7600GT 2GB OCZ Gold @ DDR 2 900 5-5-5-15 
Hard DriveOptical DriveMonitorPower
320GB Maxtor SATA2, 160 for XP, 160 for Slackware DVD+-RW EIDE 21" CRT by Sun Microsystems 680W Echostar 22A on 12V rail 
CaseMouse
Rosewill Black small Mid-T G5 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
E6400 @ 3.6 GHz (450X8) GA P965 S3 7600GT 2GB OCZ Gold @ DDR 2 900 5-5-5-15 
Hard DriveOptical DriveMonitorPower
320GB Maxtor SATA2, 160 for XP, 160 for Slackware DVD+-RW EIDE 21" CRT by Sun Microsystems 680W Echostar 22A on 12V rail 
CaseMouse
Rosewill Black small Mid-T G5 
  hide details  
Reply
post #4 of 11
Quote:
Originally Posted by Sreenath View Post
just use background-image!! why in the world are you using background color?

background-image:url("pathtoimage.jpg")

unless i am missing something about why you would want to go this route
That is the preferred way to do it...
    
CPUMotherboardGraphicsRAM
Pentium D - 915 @ 2.8gHz Intel D946GZis GeForce 9500GT 1gb DDR2 
Optical DriveOSCase
DVD/RW WinXP Home SP3 Rosewill Cheapie 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
Pentium D - 915 @ 2.8gHz Intel D946GZis GeForce 9500GT 1gb DDR2 
Optical DriveOSCase
DVD/RW WinXP Home SP3 Rosewill Cheapie 
  hide details  
Reply
post #5 of 11
Thread Starter 
i tried this; but it didnt work, i also tried it without the "url"

Quote:
background-image:url<ss:image source="$templateSet.images['black.jpg']"/>;
post #6 of 11
Create a picture, 1px by however tall you want it. Fill it in with a gradient.

Then the css:
Code:
body {
   background: #color url(image.png) repeat-x;
}
You may know it doesn't need to be a .png
I just prefer them.
Time Sink
(21 items)
 
 
CPUMotherboardGraphicsRAM
Intel 2500k ASUS Sabertooth Z77 EVGA GTX 670 FTW G.Skill Ripjaws 8GB (2x4GB) DDR3 1600 
Hard DriveHard DriveHard DriveCooling
Samsung F3 1TB Crucial C300 128GB Corsair Force GT 60GB Noctua NH-U12P 
OSOSMonitorMonitor
Windows 8.1 Professional x64 Apple OS X Mavericks HP ZR24w LG IPS226V 
KeyboardPowerCaseMouse
Razer BlackWidow Seasonic X750 Lian-Li PC-A05B Logitech M500 
Mouse PadAudioAudioAudio
Mionix Propus 380 Zero USB DAC (2009 Version) Emotiva Pro airmotiv 4 Beyerdynamic DT990 600ohm 
Audio
Shure SRH-840 
  hide details  
Reply
Time Sink
(21 items)
 
 
CPUMotherboardGraphicsRAM
Intel 2500k ASUS Sabertooth Z77 EVGA GTX 670 FTW G.Skill Ripjaws 8GB (2x4GB) DDR3 1600 
Hard DriveHard DriveHard DriveCooling
Samsung F3 1TB Crucial C300 128GB Corsair Force GT 60GB Noctua NH-U12P 
OSOSMonitorMonitor
Windows 8.1 Professional x64 Apple OS X Mavericks HP ZR24w LG IPS226V 
KeyboardPowerCaseMouse
Razer BlackWidow Seasonic X750 Lian-Li PC-A05B Logitech M500 
Mouse PadAudioAudioAudio
Mionix Propus 380 Zero USB DAC (2009 Version) Emotiva Pro airmotiv 4 Beyerdynamic DT990 600ohm 
Audio
Shure SRH-840 
  hide details  
Reply
post #7 of 11
Thread Starter 
i tried this, but no luck..

Quote:
background: #color url (<ss:image source=$templateSet.images[black.jpg] />) repeat-x;
post #8 of 11
Did you try what I put?
Time Sink
(21 items)
 
 
CPUMotherboardGraphicsRAM
Intel 2500k ASUS Sabertooth Z77 EVGA GTX 670 FTW G.Skill Ripjaws 8GB (2x4GB) DDR3 1600 
Hard DriveHard DriveHard DriveCooling
Samsung F3 1TB Crucial C300 128GB Corsair Force GT 60GB Noctua NH-U12P 
OSOSMonitorMonitor
Windows 8.1 Professional x64 Apple OS X Mavericks HP ZR24w LG IPS226V 
KeyboardPowerCaseMouse
Razer BlackWidow Seasonic X750 Lian-Li PC-A05B Logitech M500 
Mouse PadAudioAudioAudio
Mionix Propus 380 Zero USB DAC (2009 Version) Emotiva Pro airmotiv 4 Beyerdynamic DT990 600ohm 
Audio
Shure SRH-840 
  hide details  
Reply
Time Sink
(21 items)
 
 
CPUMotherboardGraphicsRAM
Intel 2500k ASUS Sabertooth Z77 EVGA GTX 670 FTW G.Skill Ripjaws 8GB (2x4GB) DDR3 1600 
Hard DriveHard DriveHard DriveCooling
Samsung F3 1TB Crucial C300 128GB Corsair Force GT 60GB Noctua NH-U12P 
OSOSMonitorMonitor
Windows 8.1 Professional x64 Apple OS X Mavericks HP ZR24w LG IPS226V 
KeyboardPowerCaseMouse
Razer BlackWidow Seasonic X750 Lian-Li PC-A05B Logitech M500 
Mouse PadAudioAudioAudio
Mionix Propus 380 Zero USB DAC (2009 Version) Emotiva Pro airmotiv 4 Beyerdynamic DT990 600ohm 
Audio
Shure SRH-840 
  hide details  
Reply
post #9 of 11
Thread Starter 
yea
post #10 of 11
Quote:
Originally Posted by blade007 View Post
i tried this, but no luck..
You can't have the < > part. Just the ( ). Not (< >)

background-image:url("pic.gif"); ---- that's the only way it will work. You can't change the layout of that code.
über pwnage v2
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K 4.4GHz @ 1.36v Asus P8Z68-V LX EVGA GTX 970 SuperClocked ACX2.0 4GB G.SKILL Ripjaws X 2x8GB DDR3 @ 1648MHz 
Hard DriveOptical DriveCoolingOS
840EVO 250GB / 3TB+2TB+320GB Bar / 750GB Cav Blk Samsung DVDRW Hyper 212+ Windows 10 Pro x64 
MonitorKeyboardPowerCase
U2412M + X191W Azio MGK1 Corsair RM650X Centurion 5 with acoustic foam 
MouseMouse PadAudio
MX518 SteelSeries Xonar DG + Koss PortaPro + Logitech X-540 + Bey... 
  hide details  
Reply
über pwnage v2
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K 4.4GHz @ 1.36v Asus P8Z68-V LX EVGA GTX 970 SuperClocked ACX2.0 4GB G.SKILL Ripjaws X 2x8GB DDR3 @ 1648MHz 
Hard DriveOptical DriveCoolingOS
840EVO 250GB / 3TB+2TB+320GB Bar / 750GB Cav Blk Samsung DVDRW Hyper 212+ Windows 10 Pro x64 
MonitorKeyboardPowerCase
U2412M + X191W Azio MGK1 Corsair RM650X Centurion 5 with acoustic foam 
MouseMouse PadAudio
MX518 SteelSeries Xonar DG + Koss PortaPro + Logitech X-540 + Bey... 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to change background color to a gradient