CSS - Css Gradient Background Question

Hi all,

I think I came across it a while ago, but I can not find it now. There was this trick on how to make a CSS gradient background,

it was something like

background-color: #123456 50%;

or something like it. That thing is supposed to fill up a table cell or an entire page with gradient background, if anybody knows what I am saying, assist me, please. I wish I could describe it better than that, but I don't think I can!

Thank you,

Chris

Hello all
Anyone can pls help me with horizontal gradient fill using only the background-color property in css?
Attached is the color I need to get, here it is an image, but I want to do this without using the url tag in css, whereby if possible I enter the color directly to the css code and get something like the image attached...

hey, i have 2 CSS problems.

number 1: my main <div> is not centered in IE. it's fine in FF, mozilla, and opera, but it stays all the way to the left in IE.

Code:

#main { width: 77%; margin: 0 auto; border: 1px solid #999; overflow: auto; background: #970303; color: #FFF; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; }

Code:

<div id='main' align='center'>

number 2: i can't figure out this gradient background stuff. i have an image, 1 px wide and 1000 px high. it works fine, but once theres enough information on a page, and its longer than the 1000px, the image starts over and looks extremely unprofessional. how can i make so that the one gradient image is stretched out for the length of the page?

thanks.

I'm still pretty new to css, so please be patient. I've downloaded some pictures that are meant to take the place of the entire background without repeating. I've tried dev'ing an external style file that has this pictu here is the code I have in the style file as is:

body {color: black;
background: url(write020.jpeg) center center}

Well, every time I use this picture, it never comes up, I know I've linked it correctly, because when I place pictures that are meant to be tiled(repeated) they work, any suggestions?

All
I'm new to html and css and this one has put a flat spot on my forehead over the last 2 days. Anyway, I have an image that I want to cover successive rows in a table with; one image spanning 6 rows. The table has no borders because I would prefer to group the data fields in the cells with an image. The image is a trim box with a little faded color around the edge.

I'll take any ideas!!
Thanks'Pete

I was wondering if there is a way to make your wrapper have a background color to make your font more readable but still be transparent so that you still can see the body background pic?

Hopefully this doesn't sound like a stupid question.

Is that possible? What would be the code for that?

Ok, if you go to http://www.fgdesigns.net on a higher resolution (great than 1024x whatever) you will see that the footer is hovered and the picture extends down.

I want to either: hide the rest of the picture, or have the footer all the way at the bottom. Though, I believe it is impossible to have the footer touch the bottom on such a high resolution, given such little content. So, is there a suggested way to hide the rest of the picture?

I have a website and i want to use two background images like this:

Code:

+---------------------------------------+
|           Main page with              |
|           background image 1          |
|                                       |
|       +-----------------------+       |
|       | Box 1 with top of     |       |
|       | background image 2    |       |
|       |                       |       |
|       +-----------------------+       |
|         (background image 1)          |
|       +-----------------------+       |
|       | Box 2 with middle of  |       |
|       | background image 2    |       |
|       |                       |       |
|       +-----------------------+       |
|         (background image 1)          |
|       +-----------------------+       |
|       | Box 3 with bottom of  |       |
|       | background image 2    |       |
|       |                       |       |
|       +-----------------------+       |
|                                       |
+---------------------------------------+

Basically, I want the boxes to "share" the same background image (i.e. not have it repeat in each box) but to have the first background image appear between (and on the sides) of each box.

Is this possible? (And if so, how can it be done?)

hey all, i have just been looking at this site http://www.dynasig.net/index.php after seeing a link on devshed to it and i really like the menu...thing is i can't seem to get the gradient like they have it... any ideas??

thanks in advanced to anyone who can reply

RF

I was wondering on this table I have I want it to have black background colour but I want to change the opacity to where you could see the background image too

I have successfully added a background image to the page but it does not center how I want it to. Right now it is positioned at top center. I would like to move it to Center center of entire page. Using this code instead of center for background-position did not do anything. Neither did 50%, 50%. What can I do to move this over.
I have the same problem with a picture file to go above the background file and web links which are all placed at top left of page. It would be nice to move them to top center of page.
How is this possible through html code?

Here is the code for the background image:
<style type="text/css">
body { background-image: url(picture/bamboo.jpg) }
body { background-position: center }
body {background-repeat: no-repeat }
</style>

Thank you for your help,

Hi.

I would like to create a gradient similar to the microsoft website.

http://www.microsoft.com/downloads

Look how the gradients at the top and bottom of the page work. Im sure this is not simply repeating an image.

Does anyone know how this works?
or can point me in the direction of a tutorial on how to achieve this?

I looked at the microsoft site in Opera and NS, and the dynamic grad only seems to work in IE.

So im guessing that you can also set a bkgnd image?
for the other browsers?

many thanks.

Hi all,

I need to have two CSS stylesheets that change the background color of my page.

All I need to know is the CSS code to change the background color.

Cheers.

Hi all,

I am trying to do the following:

I want to have a page essentially divided into 3 sections: left side|middle|right side. On the left and right sides of the page, I would like to have a gradient that is a dark shade of gray starting from the edge of the screen and getting lighter as it reaches the middle section of the page.

I have seen some tutorials on the web describing how this is accomplished, but I have not had much luck. I have been told that an easy way to do this would be to treat the page as a large table, with the centre cell being another table. I am pretty sure that this is poor design, but I am unsure about how to do this the proper way.

As for the gradient portion, the tutorials indicate that I should make an image that is a few pixels in height and x number of pixels in width, and just do something similar to this:

Code:

.grad{
	background:url("gradient.jpg") top left repeat-y;
}

where "gradient.jpg" is the image I created. I could then apply the "grad" class to any element I wish, but I can not get this to work.

Any ideas would be helpful.