|
CSS - Proportionately Scaling Of A Background Image Fix For Ie6 Or At Least Ie7
Hi:
I am having trouble implementing a background image using CSS for compatibility with IE7, and if possible, IE6. In my CSS, I have the following code defined Code:
body{
margin:0px;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: black;
background-color:#fff;
background-image: url(../images/bg.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: absolute;
background-size: 100%;
}
/*
body{
margin:0px;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: black;
background: #fff url(../images/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
*/
The results work fine in Chrome, Safari and Firefox on both PC and Mac. However, the image does not scale and gets cropped in IE7. I have tried it two different ways, both of which are in the code, and one of which is commented out. Neither way works properly with IE7. Does anyone have a solution to this that they could share with me. Thanks. Similar TutorialsI am writing my site in XHTML 1.1 (application/xhtml+xml) entirely using ems. The page scales really nicely with browser text resizes however all of my rounded corners (background images), image bullet points, and any other background images do not. Is there any way to specify the background image width in ems? I think I'm going to have to mix presentational images with content otherwise. Prior to doing any serious mobile work, I learned if you had an image that was mostly decorative and didn't need to be read as part of the content, you used a background image. In today's world you have to support many mobile devices. There's a nice trick with <img> tags where you give them a max-width of 100%, and they will scale down proportionately on mobile devices. As far as I can tell, there isn't quite as good of a solution for background-images. Say I have a background image in a div, and I set the dimensions to match the background size - 600 x 300. To allow it to scale down on mobile devices, I set a max-width of 100%. But that doesn't scale the background image down, just crops it. So I set background-size: contain, which makes the background scale, but the div is still 300px tall. And that's where I run into the problem. How do I tell the div to only be as tall as its background? Am I missing something? I have an image I want to display in a <td> cell, that scales with the cell dimensions. How do I do that? Hi all, I have a problem in scaling images, I re-size all images by -50% to make them act as thumbnails at the following address: http://www.magic-photography.co.uk/photoselector.html It works fine in Chrome using the following simple CSS: Code: a img { border: none; height: 50%; width:auto; text-align: left; }
however in IE/Firefox the images do not re-scale at all. Very very grateful for any help offered. 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. 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. 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 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 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 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? 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 Got it sorted now Thanks - Dan. I've made an image to explain my problem pretty well : imgur dot com /n8uOX (apparently I am not allowed to posts links , however its kinda hard for me to explain the problem so its easier to just show it) basically i want my page to always be rendered as I intended it to. I am pretty sure my coding is quite bad and thats what caused the problem , yet if anyone have any way to fix this please post in this thread. Thanks Hi, I am having a problem with some getting a div to scale to the full height that I want it to. Any help would be much appreciated. Here is the link to the page in question: http://www.paultheillustrator.com/template.html Basically, I have 3 divs (wrapped in another div), floating left of each other. The left and right div are simply background shading images. The center div is where the content (on this page, my blog) is. The centre div and wrapper div heights are set to auto (as I want them to expand with the amount of content in the centre div). However, because of this, the left and right divs (which have no content, just a repeating background image), do not appear. Currently I have their height set to 100%. Any solutions would be much appreciated! Thanks, Paul Here is the CSS: Code:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(../images/bg.gif);
background-repeat: repeat;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
line-height:14px;
color:#666666;
}
html, body {
height:100%;
}
#centre-right a:link {
color: #000000;
text-decoration: none;
background-color:#FFFF00;
}
a:visited {
text-decoration: none;
color: #000000;
background-color:#FFFF00;
}
a:hover {
text-decoration: underline;
color: #333333;
}
a:active {
text-decoration: none;
color: #44C3F3;
background-color:#FFFF00;
}
h2{
/*letter-spacing:-1px;*/
color:#999999;
font-family: Arial, Helvetica, sans-serif;
line-height:20px;
font-weight:100;
font-size:24px;
margin-left:-2px;
}
#overall_wrapper{
width:737px;
height:auto;
margin:0px auto;
}
#main_top{
width:737px;
background-image:url(../images/top-main.png);
background-repeat:no-repeat;
height:198px;
}
#menu_wrapper{
width:737px;
}
#left_bar{
width:28px;
height:auto;
background-image:url(../images/bg_left-strip.png);
background-repeat:repeat-y;
float:left;
}
#centre{
background-color:#FFFFFF;
height:auto;
width:681px;
float:left;
}
#centre-left{
width:168px;
height:100%;
float:left;
margin-left:28px;
margin-top:28px;
margin-bottom:28px;
}
#centre-right{
width:428px;
height:auto;
float:left;
margin-left:28px;
margin-top:28px;
margin-bottom:28px;
}
#dots{
margin-top: 14px;
width:70px;
height:14px;
background-image:url(../images/arrows-dots.gif);
float:left;
}
#centre-right .blog{
margin-top: 14px;
float:left;
width: 334px;
margin-left:14px;
}
.header-text{
}
#right_bar{
width:28px;
height:100%;
background-image:url(../images/bg_right-strip.png);
background-repeat:repeat-y;
float:left;
}
#footer{
width:737px;
height:257px;
background-image:url(../images/footer.png);
float:left;
}
How come IE obeys fixed and em font sizes and firefox doesn't? I want all my site text to be scaleable apart from the navigation text which I gave a fixed size of 10px. In IE the scaling is observed and all fonts are em apart from the navigation. In firefox however it scales ALL fonts which is very annoying. Is this a known problem? Is there a way to tell a browser to NOT zoom it when the user tries to zoom the text... I ask because I use text in a menu bar that I do not want to scale at all. Thanks Hello, I'm new to these forums and I have a question. I am making a website (c-pj.net/lowercase/), and I'm having a problem. If I add too many posts or make a post to long it goes off the page, or at least the text does. What I mean by that is that the text ends up going onto the header and past my content holder image. Can anyone take a look at the source code, and my style sheet and tell me how I could make the height of my content area scale to the proper size, when I try to set it to auto it doesn't display at all. This could be caused by the fact that my content are is absolutely positioned but I'm just looking for some advice hopefully you guys understand my question. My style sheet is located he c-pj.net/lowercase/stylesheets/default.css I want to use php to get images from a database and display them as css background-image attributes I know that the css Code: #id { background-image: url ('path/file'); }
works (obviously) and the html Code: <img src='image-generator-script.php'> also works but the css Code: #id { background-image: url ('image-generator-script.php'); }
doesn't work for me. It seems as though it should work. Why place such a seemingly arbitrary limitation on CSS as only being able to display images from existing files? I've done lots of searching through documentation and on forums, but not found anything conclusive either way. A couple of people have said it works. But it doesn't for me. Is there some extra configuration step I'm missing? Does anyone know for a fact that it works? -- so I can know for sure that somewhere I'm making a blunder in my code. But the code is simple, and I don't see where it could go wrong. (As is always the case!!) I can see the image in the browser just by pasting in the script link to the address bar. I know that url() specifiers are relative to the location of the stylesheet, not the html document, but in this case the html, the css, and the php are all in the same directory. I can't see what I could be doing wrong, so it really looks like you can't do it. But why?? And why isn't it mentioned in the documentation? (At least in the placers I've looked.) If you store all your images in a database, how on earth can you display any of them in CSS except by using a script in the url() specifier? I've seen plenty of tips about generating css files from php (I already do it), but that won't help in this case. All I can think of is to have php write the image data from the database into a temporary file, and put that file name into the url() specifier. But what a horrible kludge!! I will be very grateful to anyone who can give me solid facts on this question. Andrew Blake |
|||||||