|
HTML - Help! I Need To Stetch A Gradient Vertically, But It Keeps Tiling Instead!
I have a gradient image I'm trying to use as a background for a <div>, but I'm having a bit of a problem in that I can't get the image to stretch properly to fit the <div>.
The thing is the </div> can change size, and the image needs to be able to change size with it. I've managed to get it working to the point where the image will TILE to fit the <div>, but that doesn't create the look I want. I need it to STRETCH, not tile. I have also managed to get the image to stretch to the browser window, but like I already said, it needs to stretch to fit the <div> while ignoring the size of the browser window. Just in case you have trouble visualizing exactly what I'm talking about, I have already uploaded two different versions of the partially finished website at the following URLs: http://www.finalfreak.greatnow.com/neo_index.html http://www.finalfreak.greatnow.com/neo_index2.html Notice how in the second link the gradient continues past the footer to the bottom of the window? That's what I'm trying to fix. What I want is for the image to conform to the size of the <div> like in the first link, but without tiling like the first link. Also, the page currently only works properly in Firefox. I'm planning on fixing it to work right with Internet Explorer as well, but I'd like to get the gradient problem resolved first. I've been trying to get this to work for days now and it's driving me crazy! Any help would be greatly appreciated. Similar TutorialsHello everyone.... I'm trying to figure out how to tile right to left with an image inside a <td>. Anyone know how? Right now I'm using the background property but it tiles an image left to right. I need it to tile right to left. Any ideas? Thank you...... I have done this before, but forgot exactly how I forced (and I mean FORCED) it to work in both IE and FireFox. I am creating borders. I clearly set the width and height of the divs that contain the border images. corners do not tile, vertical borders do not tile in the x dimension, and horizontal borders do not tile in the y dimension. Or they're not supposed to. To force IE to act right, I have to add overflow:hidden to the style. Everything works except for the horizontal borders, which tile one extra border. Like this: Anyway, would someone please examine this simple code and tell me why it isn't working? By the way... KE is our prefix, B is Border, V is Vertical, H is Horizontal, and C is corner, to help you figure out what the style names are. So, KEBC is a Border Corner which could be top-left, top-right, bottom-left, bottom-right. I MUST use background images for tiling purposes with the vertical and horizontal borders, so please, no lame answers to the effect: "just embed an <img> instead of using backgrounds..." THat doesn't solve the problem. ...In advance... HTML Code: <html>
<head>
<style>
.KEBC
{
position:absolute;
width:5px; height:5px;
background:no-repeat;
overflow:hidden;
}
.KEBVS
{
position:absolute;
width:5px;
background:no-repeatx;
overflow:hidden;
}
.KEBHS
{
position:absolute;
height:9px; width:5px;
background:no-repeaty;
overflow:hidden;
}
</style>
</head>
<body bgcolor="#000000">
<!-- Make a Framed Container DIV element -->
<!--~FC--><div style="width: 200px; height: 100px; background:#333333; position:absolute;">
<!-- -- First, do the corners -- -->
<!-- Top Left Corner (tlc.png) is 5x5 -->
<!--~TLC--><div class="KEBC" style="left:0px; top:0px; background:url(tlc.png)"></div><!--TLC~-->
<!-- Top Right Corner (trc.png) is 5x5 -->
<!--~TRC--><div class="KEBC" style="left:195px; top:0px; background:url(trc.png)"></div><!--BRC~-->
<!-- Bottom Left Corner (blc.png) is 5x5 -->
<!--~BLC--><div class="KEBC" style="left:0px; top:95px; background:url(blc.png)"></div><!--BLC~-->
<!-- Bottom Right Corner (brc.png) is 5x5 -->
<!--~BRC--><div class="KEBC" style="left:195px; top:95px; background:url(brc.png)"></div><!--BRC~-->
<!-- -- Next, do the top, sides, and bottom. You must specify width for horizontal borders and height for vertical borders -- -->
<!-- Top Side (t.png) is 1x5 repeatable, width of container - 10, left = 5, top = 0 -->
<!--~T--><div class="KEBHS" style="left:5px; top:0px; width:190; background:url(t.png);"></div><!--TLC~-->
<!-- Right Side (r.png) is 1x5 repeatable, height of container - 10, top = 5 -->
<!--~R--><div class="KEBVS" style="left:195px; top:5px; height:90; background:url(r.png);"></div><!--BRC~-->
<!-- Bottom Side (b.png) is 1x5 repeatable, width of container - 10, left = 5 -->
<!--~B--><div class="KEBHS" style="left:5px; top:95px; width:190; background:url(b.png);"></div><!--BLC~-->
<!-- Left Side (l.png) is 1x5 repeatable, height of container - 10, top += 5, left += 5 -->
<!--~L--><div class="KEBVS" style="left:0px; top:5px; height:90; background:url(l.png);"></div><!--BRC~-->
<!-- -- Next, do the horizontal split. You must specify width for the horizontal border -- -->
</div><!--FC~-->
</body>
</html>
I am trying to make a stripe down the left of my page. The tutorial I followed said that if I make my background image at least 1200 then it shouldn't do any extra tiling (on the right). My image is 1200x20 pixels. The left stripe is just great, unfortunately, it is also tiling almost right in the middle of the page (not even on the far right? which I don't want either). What's going on I even tried to make it wider and, interestingly enough, the location of the stripes (the left and the stinkin' one on the right that I don't want) remained but the stripe shrunk! Help! kara Hello, all...this is my first time on the site. I am a newb when it comes to HTML etc...I won't lie. I know just about nothing when it comes to websites. I'm a graphic designer, and i created a background for my website I'm trying to: (A) Stop the tiling of my background image... (B) Center the image I bought some books on HTML and they're pretty good. I don't have any trouble following them. I started reading about STYLE SHEETS and it seems this is the way to go. I've read about EXTERNAL, INTERNAL, INLINE and I would like to use the EXTERNAL method...but I don't know how to: (A) Make a link to my style sheet for the background image to be centered (B) Writing the style sheet, so that it centers and doesn't tile my image... Pllease, any help that you could give me, would be GREATLY appreciated. Thank you. http://www.cahoonzcreationz.com I placed an image in the backround of a table on my page. It looks fine on my computer with a square monitor set at 1024x768 pix. When I viewed it on another monitor, a wide screen it displayed about half of my image to the right of where I placed it in the table. Can this be corrected so the image looks correct in all screen resolutions? Here is a link to the page in question. It's the motor in the upper left. The image name is: log2.gif http://cb750sandcastonly.com/new/ Thank You. Hi guys I have this code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>help</title>
<style>
body {
background-color:#515151;
font-size:100%;
}
#container {
width:780px;
margin:auto;
background-color:#fff;
overflow:hidden;
}
#left {
float:left;
width:370px;
padding:10px;
}
#right {
float:left;
width:370px;
padding:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
</div> <!-- Left end -->
<div id="right">
</div> <!-- Right end -->
</div> <!-- Container end -->
</body>
</html>
but i want the background to be like the picture i have linket: (Dont understand what I mean?? The Gradient background) Thank U for Ur time and Ur help Hello community! AM learning HTML and am new on this forum. I was wondering how can someone make a background with gradient effect and oblique lines (or transparent squares sometimes) as on this webpage: http://www.brandeis.edu/learning/arts.html. Thank you all! Hi Well the title spoke for me I have the gradient colours I want, except there going sideways. How do I make them go downwards? Cheers [EDIT:] This is my code: <body style="filter:progidXImageTransform.Microsoft.Gradient(endColorstr='#C1CFE4', startColorstr='#ffFFFF', gradientType='1');"> Hi, Can anyone help me with some code. I have a gradient image and I need it to completely fill the page, without any border 100% height and width. Whenever I try it it does something strange! Thanks... Hello - I'm currently in the early stages of putting together a new website, and I'm trying to have a top-bottom color gradient (in the "header" area of the page) with a background image (i.e. picture) as well. I can do each individually no problem (gradient with a 1px repeat-x image in css; and the image quite obvious), but I want to keep the gradient consistent across the entire top of the screen, regardless of the viewer's screen resolution, and the picture centered. Anyway to de-couple the two? You can see the current one-big-image solution here (and I want to see the gradient continuing on forever): http://tomatomountain.com/738/ I could just make the background image really wide, but it seems a waste of space and file size. How to display gradient text effects without using image in html. Hi guys, I'm trying to chop a template that has a drop shadow on top of a gradient background. I've attached a picture (not the template, but same principle) to explain the problem. I haven't done chops for a few years, and I'm wondering if this sort of thing is possible. The content area has a dynamic height, so just a big background image isn't a possibility. The 'bottom' of the drop shadow also raises problems: on some pages it will extend below the end of the gradient, on other pages it won't. I'm guessing this is impossible without transparency, which brings me to IE6. Has anyone found a way to do 24-bit transparency in IE6 these days, or is it still 8-bit only with pngfix.js? ...Any other possible solutions? Any suggestions most appreciated. Cheers, - The Plonk i want to be able to make a gradient left to right on my page background color, but am having no luck finding a reference page. what attributes would i add to my CSS file? thanks! The FlyerFly First Hi. I am new to this forum and quite newbie in HTML...I looked around the web, but info can be messy sometimes and I remain stucked...so here am I hoping I will solve this. Thanks to you in advance :-) SO : The problem is recurrent and simple : I HAVE A PSD BACKGROUND THAT I WANT TO STRECH ALL ALONG MY HTML PAGE...BUT WHATEVER I DO IT DOES NOT WORK , it repeats but does not strech. I am working with D8. Somebody could guide on this ? Hi, How can I set a background gradient for a cell in a table? (i.e., start colour:#222222; end colour:#000000) The size of the cell may vary so a tiled image wouldn't work. Thanks. I am using a css gradient background in a header and footer <div> area that have a border radius set. The problem is that in IE9 the gradient background is squared off and extends past the border radius. Now in FF 4.0 this does not happen, it is only happening in IE9. Here is the coding for the area in css: Code: .footer {
padding: 10px ;
background:#000000;
background: -webkit-gradient(linear, left top, left bottome, from(#000000), to(#666666));
background: -moz-linear-gradient(top, #000000, #666666);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#666666)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#666666);
border:2px solid #cccccc;
border-radius:10px 10px 10px 10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
position: relative;
clear: both;
}
I know that Firefox renders html pages more efficiently than IE, but unfortunately not everyone is as smart to use FF. Good afternoon! Where has the sun gone I'm freezing! Is it possible to have a table with rowspan with the text in the rowspan to read vertically (like taking an entire sentence after its been typed and rotating it 90ccw)? Hi, I've got an image 25x25px which i'm trying to vertically align in a 35px high list element. The css attached to the image is: width: 25px; height: 25px; border: 0px; vertical-align:middle; and the css attached to the list element is: font-size: small; height: 35px; border-style: ridge; border-width: 0px 0px 2px 0px; I'm trying to find a way of getting the browser to vertically align through css. I'm not trying to use padding, etc on the image, because i'm worried that when a user enlarges the text, or its rendered by different brwosers, etc, the image will mis-align itself. I thought vertical align was the right attribute, because i thought it vertically aligned all inline elements. but when i've attached it to the image, nothing has happened. http://www.tendervendors.com/contact.php I'm trying to vertically align the little picture of a house, in the navigation bar. I'm greatful for any help you can give, Matthew Millar Hello I have two tables in my JSP ; the first table has 3 columns, and should be displayed on top of the page and is used to display elements of a form. Another table should be displayed below that table, has dynamic number of columns. This page opens as a child window from main window The problem is that the tables are displayed beside each other if I have not specified width of table. If I do specify it (like I set it to 100%) the second table is not shown . Could you please help me and tell me how to have two tables displayed vertically inside my page ? Thank you so much Evrim |
|||||||