|
CSS - Element Background Image Won't Render
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 Similar TutorialsHow 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. *** 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 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? 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. 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. Not 100% sure if this is CSS related, however: The nav and image area below it are obviously 2 separate divs, as referenced by http://www.psyberarts.com/work/prism What is the best way to accomplish this look (the hover image, which is actually just an image for an "Active" State on a page.) I was thining about nested Divs for the pointed peice, but before I proceed I would rather get the opinion of someone who knows more than I do 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. I have a very simple form that has a select list and next to it a submit button. If I use a standard button for the submit then it sits next to the select list (on the right of it). If I change the submit button to an image it pushes the select list down by about 5 pixels. I have tried everything I can think of, everything is set to display:inline etc but I can't work out the problem. Any ideas? It happens on firefox and IE6 and probably all other browsers as well. Ok, I have a div tag set and a width at 500px. I have some and image, some text, and second image. Main questions. I want that second image to be aligned at the far right side of the 500 pixel wide div element and vertically align it in the middle. What is that attribute I should use? When I used float it caused problems with my 1px border. Hopefully this makes - Mike Hi everyone, I would like to position several <div> elements in relation to image <maparea>'s on top of an image. I have an image with several small icons on it that have information related to it. The information related to the icon can change pretty often, so I want to have that information text based so I can update it easier. Does anyone have an idea of how I could position those <div> elements in relation to the hotspot? I haven't really had much experience with 'relative' positioning, but with 'absolute' positioning I've always had issues with Netscape/Mozilla browsers displaying the elements about 10px off of where they look in IE. Is there any way around this? I'm all ears to any advice you may have. Brian I'm a bit baffled on this issue. Please visit this page - www.atrachapter.com Focus on the main image in the body of the page and mouse over the left hand navigation. The image jumps to the left. I have tried looking at all the css to see what is causing this but am baffled. Any help would be apprecaited. Thanks. Tom Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: 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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? I'm trying to create a little background image for each image on this page. A kind of crappy looking polaroid type background image. It works fine in Firefox, but not in IE. Any ideas? http://www.rhizaowns.com/holly/index.php I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09 I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move. Here is one of the examples: Code:
#homepage-bar h2.construction {
position:fixed;
top:225px;
left:505px;
}
I tried changing to position: absolute; I also tried to use percentages on the left: I know this is easy, but I can't find the fix after googling for 30 minutes. Help! Code: div.top {
border: 10px solid #CCCCCC;
border-bottom-width: 0px;
padding: 0px;
background-image: url(menutile.jpg);
}
The code above yields this . It is uneven with the normal image, though both are the same size. I simply want to tile the bg image to the border even with the normal menu images. What am I doing wrong? Code:
<style type="text/css">
<!--
.inside {
background-color: #CC9;
border: thin solid #000;
margin: 20px;
float: left;
clear: left;
vertical-align: middle;
text-align: left;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.tit {
background-color: #FC0;
clear: both;
float: left;
width: auto;
margin-top: -10px;
border: thin solid #000;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding-right: 2px;
padding-left: 2px;
}
.lab {
text-align: right;
}
-->
</style>
<head>
</head>
<html>
<body>
<div class="inside">
<div class="tit">
Size
</div>
<br />
<table>
<tr>
<td class="lab">Width:</td><td><input name="pxWidth" type="text" value="250" size="6" /></td>
</tr>
<tr>
<td class="lab">Height:</td><td><input name="pxHeight" type="text" value="80" size="6" /></td>
</tr>
</table>
</div>
</body>
</html>
Could someone tell me why does this piece of code doesn't render the same way in IE as it does in Firefox. In Firefox everything is fine... I think it has something to do with the margin property of the .inside class [Edit] Sorry about the sloppy post. I actually resolved the issue. It had to do with the way IE understands divs. Thanks you for your reply |
|||||||