CSS - Element Dynamic Gradient Background

Hi all, I have searched all over and can't seem to find an answer. I am looking for a template or tutorial on how to build a center content area with a drop shadow on top of a gradient background. An exact example would be:

www.fatwallet.com
points2shop.com

Thanks for any guidance!

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 trying to create a block quote like in the image below:

http://www.norrislakevillas.com/images/block-quote-sample.png

The quotation marks sit in the bottom right corner of a 50 X 45 px transparent PNG image with 10px of spacing on the top and left.

The element is rendering correctly with the exception of the background image, it just won't show up.

CSS Code:
Code:

#block_quote{
   float:left;
   width:400px;
   background:#f7f7f7;
   background-image:url(images/quote-top.png) left top no-repeat;
   margin:50px 0 100px 53px;
   border:1px solid #ccc;
}

#block_quote p{
   font:italic 14px segoe ui, arial, sans-serif;
   color:#5f5f5f;
   line-height:1.4em;
   margin:0;
   padding:20px 15px 20px 60px;
}

Any ideas why the image isn't rendering?

Thanks

I can't figure out what's going on here. View this page in Firefox and the problem is obvious:

http://www.westportsquares.com/page...e-internet5.php

The background on the word Comments which is between H2 tags extends upward. Here is my code for h2 and the parent element:

Code:

div.comment { 
	padding: 4px; 
	text-align: left; 
 }
	
div.comment h2 {text-align: center;  
  background: #484452; 
  color: #A098B3; }	

Hopefully I'm just missing something simple here. Any suggestions?

*** After posting I have been playing with other options, but would still love to know why the bg position on .container_12 does not work.


Please look at this page http://www.mts-diesel.com/index.php?cPath=20_24_56 There is an element w/ an class of container_12 that I have put an inline style declaration of

style="background:transparent url(images/container_12_bg.jpg) 0 1000px !important;"

I am trying to push the background down below the navigation but for some reason I can only move the background image to the right, and not down as needed.

Thank you for any help. Tom

How can I set a background image as a wrapping element?

Here is what I do have:

graphics/navigation.gif
left top
no repeat

Note that links will be set over the image.

Is it possible without any client side scripting to load in backgrounda.gif for 800x600 resolution and backgroundb.gif for any other resolution?

Server side scripting is ok but I was hoping for a CSS method although I am pretty sure it's not possible.

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,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

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'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,

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!