CSS background image gradient
A new tutorial has been added to the css section. it gives instructions on setting gradient background images in elements. There are instructions on setting background gradients for paragraphs, pages and on hover. It can be used in conjunction with the GIMP gradient tutorial.
Continue to css gradient tutorial …
October 3rd, 2007 at 3:26 pm
hi, I’m very fond of gradient backgrounds.m, Once up to create my own website, I did it with MS Word (!) and saved it as HTML. All the web browsers known displayed it the same way (acceptably, but not perfect due to some unsmoothness between the colour transitions). Finally, I removed it.
Then, I came across your website und tried to find out, whether I can borrow some ideas on the gradient topic from. I am looking for a UNIVERSAL (for all browsers 1280×1024) gradient going downwards as of a dark-light-dark type (just like yours on the buttons). However, in the text I was able to read about a simpler coding only. I also could not catch your idea about jpg format while speaking about css. I am thinking of a background image in jpg format since I have no css coding. So, I cannot see the relationship between a jpg image and your css coding in this case. I have always thought of the both as being the two different ways of creating the backgrounds.
I will be thankful to hear from you soon if you could give me any instructions. Thank you.
October 3rd, 2007 at 4:26 pm
Hi Alex
The jpg just refers to the image which is required for the gradient. It looks better than a gif. The css needs an image to repeat across the page, but as stated a 1px wide gradient will do.
If you copy the css from the tutorial it should work ok (No. 3 in the tutorial I believe). You don’t need much css experience to do it. This way it covers different browser widths as well, although as explained if going across the page it can’t adjust for the different browser heights. Maybe create a 1px wide by 1200px height image and it ill look ok. If you haven’t got the graphics knowledge to create the image, either:
1. Download GIMP and go to our creating a gradient page or
2 Go to Dynamic Drive’s gradient creator page, it does it all for you.
Both are linked on the css gradient tutorial.
I hope this helps.
Martin
October 29th, 2007 at 12:55 am
Hi,
You do not clearly explain in the tuturial how to make the rest of the page below the gradient be a certain color. For me, it’s white, and I am trying to figure out which css tag controls this.
Thanks,
Sam
October 29th, 2007 at 1:36 am
Hi Sam
That’s a bit difficult to answer without knowing where your gradient is. If you want the whole page to be a certain background colour add this in your css file:
html, body {
background: blue;
}
otherwise if it’s a div just give the div a class and add this:
.yourclass {
background: blue;
}
I’ve just used blue as an example. There are loads of css forums and tutorials where you can learn how to apply a background colour. They may be a better bet than me trying to guess what your page structure is