|
CSS - Gradient Background Colors
My apologies if this is a total newb question, however I am quite a newb with CSS (but trying to learn).
What I am trying to do is change a color (say red) from position 0,0 to black at position 100,100. I am sure this is possible as I have seen a couple of close examples but nothing that matches what I am trying to do (and I must admit with my limited understanding of CSS I can't figure it out). ANy help will be greatly appreciated. Thanks. TJ Similar TutorialsHello 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? My css has the following code: Code: table.main {
margin: 0px;
padding: 0px;
background-color: darkcyan;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
margin: 0px;
padding: 0px;
/* fallback (Opera) */
background: #9933CC;
/* Mozilla: */
background: -moz-linear-gradient(top, #9933CC, #E8E8E8);
/* Chrome, Safari:*/
background: -webkit-gradient(linear, left top, left bottom, from(#9933CC), to(#E8E8E8));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#9933CC', EndColorStr='#E8E8E8', GradientType=0);
}
The main table is colored correctly and the gradient background works...but it stops at the bottom of the main table and restarts until the bottom of the page (my monitor is a nice bigger one so it's taller vertically than the web page). how do i make the gradient last the entire page? thanks in advance!!! -gavman 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! Hello, I created a 1px x 1000px image for my background that is a gradient. In my css I have the following code: background-image: url(images/background.jpg); background-repeat: repeat-x; Now, on longer pages (that obviously exceed 1000px) the graphic stops. Is there a way to get around this using CSS code, or should I just make the graphic longer? Thanks! Hey everyone. Can anyone tell me why the blue container backgrounds on my development site... http://cmsbase.stealthwd.ca are having a gradient in ie? I'm talking about the news, twitter, main copy etc containers. It's supposed to just repeat the image, but its making the image a gradient from left to right. Other browsers are fine. Please and thanks! 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 Given an element of a fixed width but varying heights, is there a way to give that element a gradient background that would scale to the height? I would be really impressed if someone could show me a way. Thanks. 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... Suppose I have the following: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#outer_div {
width: 800px;
height: 300px;
background-color: red; }
.interior { background-color: #ffffff; }
</style>
</head>
<body>
<div id="outer_div">
<div class="interior">
<p>Hello I am some text. </p>
<p>How are you today?</p>
<p>Would you like some waffles?</p>
</div>
</div>
</body>
</html>
The way this appears in FireFox (I haven't tested in other browsers yet) is that the 3 lines print on a white background that spans the width of the browser and then sits on top of the red background. The way that I would like it to appear is for the white background to extend only as far as the longest line. Also, I can't assume that it will only be paragraph tags, it may be links, images, headers, lists, well anything. My question is how can I achieve this? Basically I don't want the inner div to automatically be as wide as the outer div but only as wide as it needs to be. I am trying to create two different colored back grounds. By everytime i go to page properties it seems to add within the space that I need a different color. I am using dreamweaver 8. How do I go about adding two different colors? Thanks in advance. Here is a sample picture of where i need the different colors to be: ... since i am a noob i guess i cant post urls.. I used draw layers to sepearte the page in three parts the top part is my banner middle is the navigation bar third is the body the draw layers are in between some background space I would like to make the background black and the layer backgrounds white.... anyone help? Here is the site I am working on: http://testlableon.ourcampusbookstore.com/index.php There are 3 navigation bars on the template. The first one (navbar) is the black one right under the header. The second one (userbar) is right under the navbar and it is supposed to be light gray (#eeeeee). The third one is the at the bottom of the page (footerbar) and is supposed to have a black (#000000) background. If you look at the site in ie, all the background colors are displayed correctly. If you look at the site in firefox or netscape though, the userbar and footerbar are not having their background colors displayed. Any ideas? I've noticed a trend in recent CSS sites with a header, content and perhaps double footer. Each of these sections has a fixed width for the content but the backgrounds for each section are liquid and each has a unique colour. I've been trying to replicate this effect on a clients site but I just can't seem to make it work. Does anyone have any ideas? This is the technique I've been using: Code: <div id="header-fluid"> <div id="header-fixed"> <div id="header"></div> <div id="nav"></div> </div><!-- head-fixed --> </div><!-- head-fluid --> Code: <div id="content-fluid"> <div id="content-fixed"> <div id="content"></div> </div><!-- content-fixed --> </div><!-- content-fluid --> Code: <div id="footer1-fluid"> <div id="footer1-fixed"> <div id="sponsors"></div> </div><!-- footer1-fixed --> </div><!-- footer1-fluid --> Code: <div id="footer2-fluid"> <div id="footer2-fixed"> <div id="copyright"></div> </div><!-- footer2-fixed --> </div><!-- footer2-fluid --> Thanks for your time on this!! Hanek Hullo, I have an issue here that I have been trying to find a solution for for the past week, but I suppose I don't really know what exactly to look for. I want to make a background that consists of different horizontal color strips. The reason I do not want to use an image and repeat it is because the strips are different in height. I want them to shrink/expand vertically keeping their proportion to each other ( instead of repeating vertically) in case the screen used to view the website is smaller/ bigger than mine. I tried creating different elements using <div id="name"> and assigning a background color and define a percentage for the height, however this doesn't work because the element has to have text inside it to expand according to it. I do not want to assign fixed heights because as I said I want them to expand and shrink proportionally. If you know a way to do this even if it is not CSS please let me know. All help is appreciated. Thanks. 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. 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! |
|||||||