|
HTML - Background Gradient Plus Image?
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. Similar TutorialsHello 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... 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. Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result? 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 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 Hi, I'm a complete newb and html-challenged, so please forgive my stupid questions. This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right? So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks! ~Serena P.S. is it possible to do mouseovers for certain coordinates on an image map? 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. 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. Hello All, I hope this is a good place to ask my question. I was working on a a webpage and tinkering with two different screen capturing software to capture my website then all of a sudden I realized I can no longer see the background of my webpage. I can go online and see background images of someone else webpage but no the webpages stored on my computer. If anyone has any idea about the cause of the problem please help. i'm trying to set an image from my harddrive as the background but it doesn't seem to be working. I've been trying <body background="image location.jpg"> but it doesn't work. Any thoughts or solutions? thanks This is the current script I am using for background change upon a timer, does anyone know how and where I can add a no bg repeat and position the image on the bottom left? Any help would be great! Thanks <script type="text/javascript"> var bgImages = new Array(); bgImages.push("/image/girl.gif"); bgImages.push("/image/girl2.gif"); bgImages.push("/image/girl3.gif"); //bgImages.push("URL HERE"); function LoadRandomBackground() { var randomImageIndex = Math.floor(Math.random()*bgImages.length) document.body.background = bgImages[randomImageIndex]; } function StartBackgroundRefreshTimer() { var timer = setInterval('LoadRandomBackground()',10000); // 10 seconds } </script> </head> <body onload="LoadRandomBackground(); StartBackgroundRefreshTimer()"> Hello, Well im trying to make a web page type thing and i was wondering if there is a way to make the background change as if it were an image when you shrink the page down. http://www.legouniverseforums.com/radio.html thats the link. i want the video chat to be on the orange part box and the chat to be in its box but on some computers they go in there boxes but on other computers they dont. Here is how it looks on mine i would like it to look like this on every computer. http://www.legouniverseforums.com/Sc...34.34%20PM.png How would I do this? Hey everyone. I'm not too experienced in HTML and I'm having a problem with displaying a background image on this site I'm building. I know this probably isn't the best way to be doing what I'm trying to do, but I'm using a Frameset with 3 columns. The left and right I just want to display the background image and the main to be another frameset containing the main website content. It looks perfectly fine in Firefox, but in Internet Explorer the background images in leftMargin and rightMargin don't show; it's just blank. Here is my index.html file: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>| Totaro's Restaurant |</title> </head> <frameset cols="15%, 70%, 15%" border=0> <frame name="left" src="leftMargin.html" /> <frame name="main" src="main.html" /> <frame name="right" src="rightMargin.html" /> </frameset> <noframes> I'm sorry, it seems your browser doesn't support frames! x( </noframes> </html> and here is the code of one of the margins: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body {
background-image:url(images/bg.jpg);
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
Here it is in Firefox: http://i34.photobucket.com/albums/d1...itefirefox.jpg And in IE: http://i34.photobucket.com/albums/d1.../websiteie.jpg Any help would be appreciated. |
|||||||