CSS - Gradient Background Restarting

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.

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

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.

I'm using CSS to create a gradient, and all is well except for the bottom of the page:

http://www.area51entertainment.co/gradient_problem.png

For some reason it's placing a red bar at the bottom of the gradient. Any ideas why?

http://www.area51entertainment.co/index.php


EDIT: Fixed using the following:

Code:

background-repeat: no-repeat;
background-attachment: fixed;

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.

I want to setup tab links / tab strips like shown in the following article:
http://www.codeproject.com/html/css_round.asp

However, in addition to rounded corners, id like to have the individual tabs use a gradient. Its the center part that im not sure how to handle.

Help ?!!!

Can you do something like the following:
Code:

a.tab { 
   color: #000; 
   background: #fb0 url("left-tab.gif") left top no-repeat; 
   text-decoration: none; 
   padding-left: 10px 
}

a.tab span {
   background: url("right-tab.gif") right top no-repeat;
   padding-right: 10px
}

/*my addition and it does not work */
a.tab span div {
   background: url("center-tab.gif") center top repeat-x;
}

And then use the links like so:
Code:

<a href="#"><span><div>Home</div></span></a>

Hi,

What would be the best way to create a hover effect as seen on the "Get Started" button he

http://themeforest.net/item/mingle-multipurpose-wordpress-theme/full_screen_preview/235056

Thanks!

how is that possible cross browser without javascript (i dont know if these filters in IE is javascript but they are good)



i know its possible...only i dont know how..
must be someone here who know i thought

thanx a lot in advance

Hello all
How can I perform a vertical gradient fill with a color starting from #0075bc and ending in black (#000000), given am using the background property in css?

I really strive to stay as close to design when I get a psd from a graphic designer. Sometimes that can be a challenge such as the situation I am having now. If you look at this page

Osake Restaurant

you will see a header on the page that reads Restaurant Menu. This header is using a custom font called Lato.

I have uploaded a screenshot of the layer styles for drop shadow and gradient.
Screen Shot

Below is some code I found from a tutorial for css drop-shadow -

Code:

/* default setup that everything sees */
.shadow {
  /* needed for Internet explorer */
  height: 1em;
  filter: Shadow(Color=#666666, 
                 Direction=135, 
                 Strength=5);

  /* Needed for Gecko */
  line-height: 2em;
  white-space: nowrap;

}

/* 
 * used by browsers which know about
 * :before to create the shadow 
 */
.shadow:before {
  display: block;
  margin: 0 0 -2.12em 0.15em;
  padding: 0;
  color: #666666; 
}

#shadow_1:before { 
  content: 'In shadow'; 
}
#second_2:before { 
  content: 'Happy Shadowing!'; 
}

/*\*/
html*.shadow {

  [color:red;/* required by Safari 
              * so that [] is correctly
              * begun. associated with
              * the property, yet hiding
              * it. Seen by IE6 */

    /* 
     * seen by IE6 and Safari, but hidden
     * from Gecko 
     */
    text-shadow: #666666 5px 5px 5px; 

  ]color:auto; /* resets color for IE6 */
}/**/

/* 
 * end hack using dummy attribute selector
 * for IE5 mac
 */
.dummyend[id]{clear: both;}

/*\*/
html*.shadow:before {

  [color:red;/* required by Safari. 
                seen by IE6 */

    /* 
     * seen by IE6 and Safari, but hidden
     * from Gecko 
     */
    display: none;

  ]color:auto; /* resets color for IE6 */
}/**/

/* 
 * end hack using dummy attribute selector
 * for IE5 mac
 */
.dummyend[id]{clear: both;}

My question is how do I go from those settings in PSD to a equivalent look in HTML w/ CSS. Do I just play around with it or is there a more precise way.

Also what about for gradient. Hopefully others can learn from this thread as well. Thanks! Tom

I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this?

The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever.

http://www.area51entertainment.co/index.php?about

So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges.

I've set up the css as follows:

body {
background: #000 url(gradient.jpg) repeat-x;
margin: 0;
}

Here's where I run into my problem...

I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely.

<div id="bg_image"></div>

#bg_image {
width: 100%;
height: 1100px;
background: url(images/bg_image.jpg) no-repeat top center;
margin: 0;
position:absolute;
}

This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars.

This makes perfect sense of course I just can't come up with an alternative.

If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content.

I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve.

Any suggestions would be greatly appreciated!

Thanks,
Josh