Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Trying to make fading color background
New Posts  All Forums:Forum Nav:

Trying to make fading color background

post #1 of 10
Thread Starter 
I found a image with the fading color that I want, and I just need to have it repeat across the X axis of the page.

I have this line of code right now


never mind I figured it out
Code:
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>xxxxxxxxxxxxxxxxxxxxx</title>
<style type="text/css">
.auto-style1 {
margin-left: 200px;
}
.auto-style2 {
margin-left: 80px;
}
.auto-style3 {
color: #207917;
}
.auto-style4 {
margin-left: 75px;
font-size: large;
}
.newStyle1 {
background-image: url('green.jpg');
background-repeat: repeat-x;
}
</style>
but it doesnt do anything... and yes green.jpg is the file
Edited by ZTR1760 - 1/9/11 at 6:08pm
OC Beast
(13 items)
 
  
CPUMotherboardGraphicsRAM
E8500 @4GHZ Gigabyte P45 4850x2 2GB IT LIVES! 4GB 
Hard DriveOptical DriveOSMonitor
500AAKS+250external CD-DVD combo windows 7 ultimate x64 26" 
KeyboardPowerCaseMouse
MC$ wireless 650w corsair antec 900 Logitech battlefield 2142 G5 
  hide details  
Reply
OC Beast
(13 items)
 
  
CPUMotherboardGraphicsRAM
E8500 @4GHZ Gigabyte P45 4850x2 2GB IT LIVES! 4GB 
Hard DriveOptical DriveOSMonitor
500AAKS+250external CD-DVD combo windows 7 ultimate x64 26" 
KeyboardPowerCaseMouse
MC$ wireless 650w corsair antec 900 Logitech battlefield 2142 G5 
  hide details  
Reply
post #2 of 10
If you have photshop do a png or gif file with saving it for web, jpeg is horrible for fades
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #3 of 10
Do you mean gradient?

Here is some cross browser compatible CSS for gradients. This is taken right from my css for the head of my WordPress Blog. The last 2 lines are for shadow.

Using gradients, you have to set the dimension it spans, like height or width, for it to work in IE.

Code:
height: 80px;
background: #00aaff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00aaff', endColorstr='#000');
background: -webkit-gradient(linear, left top, left bottom, from(#00aaff), to(#000)); 
background: -moz-linear-gradient(top,  #00aaff,  #000);
-moz-box-shadow:0 0 25px #000;
-webkit-box-shadow:0 0 25px #000;
post #4 of 10
Quote:
Originally Posted by OpticWaves View Post
Do you mean gradient?

Here is some cross browser compatible CSS for gradients. This is taken right from my css for the head of my WordPress Blog. The last 2 lines are for shadow.

Using gradients, you have to set the dimension it spans, like height or width, for it to work in IE.

Code:
height: 80px;
background: #00aaff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00aaff', endColorstr='#000');
background: -webkit-gradient(linear, left top, left bottom, from(#00aaff), to(#000)); 
background: -moz-linear-gradient(top,  #00aaff,  #000);
-moz-box-shadow:0 0 25px #000;
-webkit-box-shadow:0 0 25px #000;
thats nice but a lot of unnecessary code. A simple solid background color and a PNG with a gradient saved out from Photoshop by "save for web" can achieve that in half the time with less code. Also, it will work with ALL browsers.
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #5 of 10
Remember, to save on file size you can stick to horizontal or vertical gradients and just do a 1px wide line with the gradient say top to bottom and repeat-x.
    
CPUMotherboardGraphicsRAM
I7 920 Gigabyte EX58 XFX Radeon 4870 X2 6GB Corsair 
Hard DriveOptical DriveOSMonitor
500GB Maxtor LG DVDRW Vista Ultimate x64 2 x Edge IO 22" 
KeyboardPowerMouseMouse Pad
Razer Arctosa XFX 800w BTC Cheetah Gaming Mouse None 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
I7 920 Gigabyte EX58 XFX Radeon 4870 X2 6GB Corsair 
Hard DriveOptical DriveOSMonitor
500GB Maxtor LG DVDRW Vista Ultimate x64 2 x Edge IO 22" 
KeyboardPowerMouseMouse Pad
Razer Arctosa XFX 800w BTC Cheetah Gaming Mouse None 
  hide details  
Reply
post #6 of 10
Quote:
Originally Posted by graphicsman View Post
thats nice but a lot of unnecessary code. A simple solid background color and a PNG with a gradient saved out from Photoshop by "save for web" can achieve that in half the time with less code. Also, it will work with ALL browsers.
Whether you think it's faster to load an image that that code I suppose is not enough time to even think about. If I had a lot of users with ancient browsers, I would use the image as well in a conditional stylesheet.
post #7 of 10
background: #2c2721 url(img/bg3.gif) repeat-x;
with #2c2721 being the color bellow the fade is the simplest way i think.
Pepe Silvia
(13 items)
 
  
CPUMotherboardGraphicsRAM
255 @ 4 Ghz MSI 870-C45 GT 520 @ 1Ghz Crucial Rendition 4GB DDR3 
Hard DriveOSMonitorPower
Hitachi 1TB Win 7 19" 420W 
  hide details  
Reply
Pepe Silvia
(13 items)
 
  
CPUMotherboardGraphicsRAM
255 @ 4 Ghz MSI 870-C45 GT 520 @ 1Ghz Crucial Rendition 4GB DDR3 
Hard DriveOSMonitorPower
Hitachi 1TB Win 7 19" 420W 
  hide details  
Reply
post #8 of 10
Quote:
Originally Posted by OpticWaves View Post
Whether you think it's faster to load an image that that code I suppose is not enough time to even think about. If I had a lot of users with ancient browsers, I would use the image as well in a conditional stylesheet.
good web design should be attempted for all browsers . . .
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #9 of 10
Quote:
Originally Posted by graphicsman View Post
good web design should be attempted for all browsers . . .
...but it comes at a price. If only 1% of your customers use for example IE6 then it would probs cost more in dev time and maintenance than you'd make from them! I think this reason is why Google officially dropped IE6 support.
    
CPUMotherboardGraphicsRAM
I7 920 Gigabyte EX58 XFX Radeon 4870 X2 6GB Corsair 
Hard DriveOptical DriveOSMonitor
500GB Maxtor LG DVDRW Vista Ultimate x64 2 x Edge IO 22" 
KeyboardPowerMouseMouse Pad
Razer Arctosa XFX 800w BTC Cheetah Gaming Mouse None 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
I7 920 Gigabyte EX58 XFX Radeon 4870 X2 6GB Corsair 
Hard DriveOptical DriveOSMonitor
500GB Maxtor LG DVDRW Vista Ultimate x64 2 x Edge IO 22" 
KeyboardPowerMouseMouse Pad
Razer Arctosa XFX 800w BTC Cheetah Gaming Mouse None 
  hide details  
Reply
post #10 of 10
Quote:
Originally Posted by Sunriselad View Post
...but it comes at a price. If only 1% of your customers use for example IE6 then it would probs cost more in dev time and maintenance than you'd make from them! I think this reason is why Google officially dropped IE6 support.
your comment is correct, an experienced designer would take this into consideration and inform their client of this. Then the client can go find a sucker that doesnt know this or pay for the quality.
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  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 › Trying to make fading color background