Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Background gradient

Status
Not open for further replies.
stax

stax

Technical User
Sep 25, 2002
81
US
Hi,

I'm trying to add a background gradient on my web page but it is causing my page to function in a glitchy manner.

The flash in the page is having problems when i scroll. Am i missing something here or is there a glitch free way to achieve the same effect?

<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#dddddd', startColorstr='#555555', gradientType='0');"

Thanks,
S
 
Sort by date Sort by votes
Are you trying to single out IE users? Filter is a proprietary IE attribute that does not work with other browsers. I would suggest you make a gradient in your favourite graphics program and then put it on the page as a background image. That way you shouldn't see any flashing and it will work cross-browser.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Thanks Vragabond,

I didnt realize that it was for IE so i have made a gradient JPEG as the background image. Are there commands i can apply to my background image to hold it in place, and maybe make it stretch to fit the screen from top to bottom but tile from left to right? At the moment it is tiling so that when i scroll down it scrolls with the page.

Best,
S
 
Upvote 0 Downvote
You can decide whether you want to repeat the image or not individually for vertical and horizontal repeat. You cannot however stretch the image. I suggest you do the following:

1. Make background one of the border colours of the image so that it will seamlessly flow from image to background.
2. Create 1px by how much px you need gradient picture. If you need the gradient to extend the entire screen and more, try over 1000px or more. If the image is just 1px on the other dimension, it should not be too big.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
321
3esolar
3
garcosta
  • Locked
  • Question
CSS Coding for Gradient Color Background for all Platforms
Replies
3
Views
79
1DMF
1DMF
Krus1972
  • Locked
  • Question
Creating a Gradient Using CSS
Replies
1
Views
57
vacunita
vacunita
csphard
  • Locked
  • Question
need help with footer h3 background-color. 2
Replies
8
Views
168
vacunita
vacunita
yaknowss
  • Locked
  • Question
Create divs with different background colors
Replies
1
Views
82
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top