|
CSS - Background Error
I'm working on a project right now using multiple panels on a site. The idea I am moving forward with has a panel of a solid color with a small 15x15 image in 3 of the corners.
I have the basic concept down of staticly moving an image to the three corners, but when I then assign a background color to the container it does not fill the space between the images, only the center. Any ideas/direction would be great! Code: <div id ="filterDIV" style = "background-color: #666666;"> <div style="position:absolute; top:0;right:0; width:15px; height:15px; background-image:url(tr.gif); float:left"></div> <div style="position:absolute; bottom:0;left:0; width:15px; height:15px; background-image:url(bl.gif); float:left"></div> <div style="position:absolute; bottom:0;right:0; width:15px; height:15px; background-image:url(br.gif); float:left"></div> test </div> Similar Tutorialshey guys i have wrote this up so i can display 2 background images on my page but nothing shows up at all any idea why? Code: <style type="text/css">
<!--
html {
background-image: #FFFFFF url((URL address blocked: See forum rules));
background-repeat: repeat-y;
background-position:0px 155px;}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body {
background-image: transparent url((URL address blocked: See forum rules));
background-repeat: repeat-y;
background-position:15px 0px;
}
-->
</style>
Hello. Can someone please help me understand why this page looks fine in IE7 and Firefox, but not in IE6: http://www.shootingblanks.net/TEMP/Nevermind/bio.php You can see that the background image is completely cut off on the left in IE6, and I'm not understanding why. Here's the CSS code for that div: Code: #bioContent {
background: url(../images/bkgnds/bio.jpg) no-repeat top left;
width: 140px;
min-height: 550px;
float: left;
margin: 0;
padding: 0;
}
Also, there's one other page on the same site that's also behaving oddly only in IE6. The picture is not on the bottom-right like it should be, and it's getting cut off: http://www.shootingblanks.net/TEMP/Nevermind/news.php Here is the code for that div, if anyone has suggestions on that one too. Thanks!!!: Code: #newsContent {
background: url(../images/bkgnds/news.jpg) no-repeat bottom right;
min-height: 400px;
text-align: left;
}
Hi everyone, I'm experiencing an unusual problem that I could use some help with. I've a layout that uses three background images (in separate divs) - a top bg, a bottom bg, and an overall bg. The bottom and overall background images are causing a problem. The top bg and bottom bg are supposed to line up. And they do! My layout looked fine on my computer (PC using Firefox 3.5.7 and IE8). I uploaded it to my personal website - and it looked fine there also. I validated the code successfully. The problem happened when I uploaded it to my client's web server. The top bg displayed ok. However, the overall and bottom background images did not display correctly. They seemed "squeezed". The overall should be center and extend to both ends of the browser window (the image is large enough). I can't seem to identify why it would do this. I even did a test by removing all of the code except for the div containing the background image. I added another div and placed the image directly into it (so that I could compare the size). Here's the css: Code: html, body {
margin: 0;
padding: 0;
background-color: #CCC;
}
#botDrop {
/* margin: auto;
*/ background: url('../images/bgDropBot.jpg') no-repeat left top;
/* width: 971px;
height: 50px;
*/ background-color: #CCC;
}
Again, looked fine on my computer, looked fine on my web server - displayed incorrectly on the client's server. On the client's server it again displayed (horizontally) smaller than it's actual size. My background image was initially about 1200 pixels wide. I reduced it, and that seemed to make it a little better, but didn't quite fix the issue. I suspect there's some sort of calculation going on depending on the screen size. However, I don't get why it doesn't do that for me when I view it locally or on my personal web server. Here's a screenshot showing the problem: http://www.stephencamper.com/screenshot/screenshot.jpg I just want the background image to display at it's actual size. Any help's appreciated. Thanks. -Stephen Hey folks, here's an odd problem that's got me totally stumped. I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version. Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however. This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts? The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest. Thanks for any help you can offer! 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 The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. 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 I am getting a CSS validation error It is: 251 * Parse Error / textarea { border: 1px solid silver; width: 80%; } If I comment the CSS in question out, it gives me another CSS error a little bit farther down in the stylesheet... not sure why it is doing that or how to just fix this validation error, as the ones that come up after it are similar. My end goal is to make the page look normal in FF2. Currently in FF2 some of the text in the purple "Sesame Street" box is blocked out. I didn't create this page, but have been asked to figure out why it looks like this in FF2. I am no CSS expert, but would love to hear from one! Thanks for your help. I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. Hello Fellas: http://global.espritwebdesign.com/muros.html This webpage will display correctly on IE, Chrome and Safari But not on Firefox 11 What strikes me the most is the error is very odd. Im Clueless. Can you visite the web page see it for yourself, and maybe give me a hint what could be? Any clues? Hello, How can add a background color to each table cell in a table header and also add a small image on the bottom right corner of each of those cells? Thanks, Miguel Am design a site just now this is the image of the site here The problem is the blue background what is the best way to do this just now i have it like this by use a repeat of part of the image but want the cloud part at the top left too. Hi, I'm building a website for my work and got in a little trouble. I do not know if it is just the browser or the code. I'm new to this CSS and HTML so i'm not 100% sure. I needed my background fixed which i had done, and on my home computer the main stuff on my page just floats above the background. On my work computer the main information is when you scroll down, after the background image. I'm confsued and wondering if anyone could help, thanks. Here is also a link to the page so you can see what the problem is, http://www24.brinkster.com/mattphat/ymca2.html Code:
<html>
<head>
<TITLE>Northwest Connecticut YMCA | We build strong kids, strong families, strong communities.</TITLE>
<style type="text/css">
html {height:100%;}body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>
<body>
<! --- --- BACKGROUND IMAGE --- --->
<div id="bg">
<img src="YMCA/graudal1.jpg" width="100%" height="100%">
</div>
<! --- --- DONE BACKGROUND IMAGE --- --->
<! --- --- MAIN PAGE BORDER--- --->
<div id="content">
<div align="center">
<table width="727" border="1" color="#736F6E" cellspacing="0" cellpadding="0">
<! --- --- DONE MAIN PAGE BORDER--- --->
<!--- --- MAIN PAGE POSITION STAY --- --->
<td align="left" valign="top" bgcolor="#FFFFFF">
</td>
<td rowspan="2" align="left" valign="middle" background="" bgcolor="#000000">
<form id="search" name="search" method="get" action="search_results.asp">
<table width="383" border="0" cellspacing="0" cellpadding="0">
<!--- --- DONE MAIN PAGE POSITION STAY --- --->
<!--- --- NWCTYMCA LOGO --- --->
<td align="left" valign="top" bgcolor="#FFFFFF">
<img src="YMCA/NWLOGO2.JPG" width="727" height="289" border="none" usemap="#Map">
</td>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
</td>
</tr>
<!--- --- DONE NWCTYMCA LOGO --- --->
<!--- --- BARS ABOVE LINKS --- --->
<!--- BLACK BAR --->
<tr>
<td colspan="2">
<img src="images/clear_spacer.gif" width="727" height="0">
</td>
</tr>
<!--- RED BAR --->
<tr align="left" bgcolor="#A93333">
<td colspan="2">
<img src="images/clear_spacer.gif" width="727" height="0">
</td>
</tr>
<!--- STRONG KIDS BAR --->
<tr align="center" bgcolor="#FFFFFF">
<td colspan="2">
<img src="http://www.ymcadc.org/PublishingImages/webuild_tagline.gif" width="360" height="15">
</tr>
</td>
<!--- --- DONE BARS ABOVE LINKS --- --->
<!--- --- LINKS --- --->
<tr bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0">
<td colspan="2">
<div align="left">
<img src="ymca/miniY.jpg"></img>
<!-HOME->
<a href="http://www24.brinkster.com/mattphat/YMCA2.html" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg" ONMOUSEOUT=rollover.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover" width="89" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-TORRINGTON->
<a href="http://www24.brinkster.com/mattphat/ymcatorrington.html" ONMOUSEOVER=rollover2.src="YMCA/Torringtonlink2.jpg" ONMOUSEOUT=rollover2.src="YMCA/Torringtonlink.jpg">
<img src="YMCA/torringtonlink.jpg" name="rollover2" width="140" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-WINSTED->
<a href="http://www24.brinkster.com/mattphat/ymcawinsted.html" ONMOUSEOVER=rollover3.src="YMCA/winstedlink2.jpg" ONMOUSEOUT=rollover3.src="YMCA/winstedlink.jpg">
<img src="ymca/winstedlink.jpg" name="rollover3" width="109" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-CANNAN->
<a href="http://www24.brinkster.com/mattphat/ymcacannan.html" ONMOUSEOVER=rollover4.src="YMCA/cannanlink2.jpg" ONMOUSEOUT=rollover4.src="YMCA/cannanlink.jpg">
<img src="ymca/cannanlink.jpg" name="rollover4" width="93" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-GIVING->
<a href="http://www24.brinkster.com/mattphat/ymcagiving.html" ONMOUSEOVER=rollover5.src="YMCA/givinglink2.jpg" ONMOUSEOUT=rollover5.src="YMCA/givinglink.jpg">
<img src="ymca/givinglink.jpg" name="rollover5" width="86" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-ABOUT US->
<a href="http://www24.brinkster.com/mattphat/ymcaaboutus.html" ONMOUSEOVER=rollover6.src="YMCA/aboutuslinks2.jpg" ONMOUSEOUT=rollover6.src="YMCA/aboutuslinks.jpg">
<img src="ymca/aboutuslinks.jpg" name="rollover6" width="104" height="28" border="0"></a>
<img src="ymca/miniY.jpg"></img>
</div>
</td>
</tr>
<!--- --- DONE LINKS --- --->
<!--- --- BOTTOM RED BAR --- --->
<tr align="left" valign="top" bgcolor="#A93333">
<td colspan="2">
<img src="images/clear_spacer.gif" width="727" height="3">
</td>
</tr>
<!--- --- DONE BOTTOM RED BAR --- --->
<!--- --- BODY TEXT SECTION --- --->
<td align="left" valign="top" bgcolor="#FFFFFF">
<center>
<P>YMCA YMCA YMCA YMCA YMCA YMCA
<P>YMCA YMCA YMCA YMCA YMCA YMCA
<P><s>FIX BACKGROUND *DONE*</s>
<P>NEW STRONG KDIS .GIF
<P><s>TOP BAR LINK IMAGES *DONE*</s>
<P><s>NEW LOGO / HEADER BAR *DONE*</s>
<P>SEE ABOUT NEW COLORS FOR LINK ROLLOVERS
<P>LEFT SIDE LINKS FOR EACH PAGE
<P>COPYRIGHT INFO AND REGULAR LINKS AT BOTTOM OF PAGE
<P>YMCA YMCA YMCA YMCA YMCA YMCA
<P>YMCA YMCA YMCA YMCA YMCA YMCA
</center>
<br>
<br>
<center>
<a href="">Home</a> |
<a href="">Torrington</a> |
<a href="">Winsted</a> |
<a href="">Cannan</a> |
<a href="">Giving</a> |
<a href="">About Us</a>
<br>
2009 Northwest Connecticut YMCA.
<br>
The YMCA is a 501(c)(3) not-for-profit social services organization dedicated to
<br>
building strong kids, strong families and strong communities.
</center>
<!--- --- DONE BODY TEXT SECTION --- --->
</div>
</body>
</html>
I have background image for bullet. However, in Firefox it tries to display several of them for one line, and in IE it is like it should - one background image per line. Ive set background to no-repeat, and it still doesn't work in FF. Help plz. See the problem here http://www.armedassault.org/wp/ someone know how to make a web with background like this... http://netcodigo.webinfo.es/ I tried, but I can't do it. pd: Sorry for my bad english. Is it just IE that using a gif as a background url not work... or is that one of the standards.. I know jpgs work.. but why not gifs? I have a div box with a 100% width and a repeating background image on it. Everything works great except when the window is smaller then the actual site. If I resize my window so that the horizontal scrollbar appears, as if I had a 15" monitor, the background image does not go all the way to the edge. Instead it is only the width of the browser window, although the content of that box displays fine. Anyone know how to fix that? I want to make a webpage with ah gradient border on the left and right side of the page. The gradients will be "fading out" towards the middle. How should I do this? I know how to get one side to show up, but not both. Can I use two different backgrounds in one CSS element? (probably not) Or should I use two different <div> tags with backgrounds set with what I want and are as big as the page? Thanks. whats wrong with this? body { font-family:arial; font-color:#000000; background:url(background/bg.jpg); } its the background bit that isnt working it works when the css is included on the page but when i put it on a seperate stylesheet it hasnt worked |
|||||||