Working with a bit of in-line CSS within a CMS (fun!). This chunk of code works as it should in Chrome and Firefox, the background image occurs just once. But when the page loads in IE 9, it's as if the no-repeat value is ignored and the background images repeats through the length of the div.
<div style="width: 500px; margin-top: -10px; background-image: url(http://.../uploadedImages/horizontal-rule-top.gif); background-position: 50% 0%; background-repeat: no-repeat, no-repeat; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(228, 128, 28); padding-top: 30px; padding-bottom: 15px; font-size: 16px; ">
...</div>
Any advice would bemuch appreciated!
I think IE's having trouble with the presence of the second no-repeat, and, per spec, disregarding the rule it doesn't understand. The options that IE understands seem to be:
repeat-x,
repeat-y, and
no-repeat.
If you amend your CSS to one of the above it should work.
Try background-repeat: no-repeat; without the second value. I believe the two value syntax is part of the CSS3 working draft and may not be implemented by IE9.
Try your background css "background: url(http://.../uploadedImages/horizontal-rule-top.gif) no-repeat 50% 0%;"
Prova con:
background-repeat-x: no-repeat;
background-repeat: repeat-y;
Related
I'm new to CSS.
I have the following CSS definition which shows an icon in my webpage.
.systemIcon{
margin-right:2px;
background:url(../images/tree/system.png?_v=001) no-repeat 0px 0px;
}
I wanted to add another icon to its right (lets say system2.png).
So I tried the following:
.systemIcon{
margin-right:2px;
background:url(../images/tree/system.png?_v=001), url(../images/tree/system2.png?_v=001) no-repeat 0px 0px;
}
But the result is that the icon show on ON TOP of the other.
Is there any way to show them side by side?
Specify background-position and background-repeat for each image:
span {
display: inline-block;
background-image: url('http://icons.iconarchive.com/icons/graphicloads/colorful-long-shadow/256/Home-icon.png'), url('http://icons.iconarchive.com/icons/kyo-tux/aeon/256/Sign-LogOff-icon.png');
background-position: 0px 0px, 256px 0px;
background-repeat: no-repeat, no-repeat;
width: 512px;
height: 256px;
}
<span></span>
If you want to show icons, perhaps you should use multiple <img/> HTML tags. That seems preferable to the background CSS property.
Well, I have a website and the front page has this image repeated all the way down. While on Chrome, is only repeats once, just like I want it to.
body {
color: #999999;
background-color: #490000;
background:url('http://pigymunk.co.uk/bgasdf2.png') fixed, url('http://pigymunk.co.uk/bgasdf.png') fixed;
background-repeat: no-repeat, repeat;
background-position: left top, left top;
}
You have
background-repeat: no-repeat, repeat;
You can only specify either no-repeat or repeat - not both, e.g.
background-repeat: no-repeat;
Chrome supports CSS3 syntax allowing both but many browsers such as IE consider this invalid as it doesn't support it. (Remember CSS2 is standard, CSS3 is only partially supported)
Updated:
To create a layerd background you need to use layers surprise surprise :).
body {
color: #999999;
background-color: #490000;
background: url('http://pigymunk.co.uk/bgasdf.png');
background-repeat: repeat;
background-position: left top;
}
#logo {
height: 200px;
width: 220px;
background: url('http://pigymunk.co.uk/bgasdf2.png') no-repeat top left;
position: absolute;
top: 0px; left: 0px;
}
HTML:
<body>
<div id="logo"></div>
...
or better yet, don't use a background image for your logo as it won't appear when background images are turned off, e.g. for printing. Crop the image to the correct size for the logo and put it in the html
<body>
<div id="logo"><img src="http://pigymunk.co.uk/bgasdf2.png" alt="Piggymunk logo" /></div>
...
jsfiddle example: http://jsfiddle.net/ytL2w/
This works fine in IE9 for me:
body {
color: #999999;
background-color: #490000;
background: url('http://pigymunk.co.uk/bgasdf2.png') no-repeat fixed left top,
url('http://pigymunk.co.uk/bgasdf.png') repeat fixed left top;
}
Try this:
body {
color: #999999;
background-color: #490000;
background-image:url('http://pigymunk.co.uk/bgasdf2.png');
background-position: fixed;
background-repeat: no-repeat;
}
Is there any way to apply multiple background images using sprites?
something like the below code?
background-image: url("../images/button-sprite.gif"),url("../images/button-sprite.gif");
background-position: right -92px, 0px 0px ;
background-repeat: no-repeat;
font-size: 1em;
margin-right: 5px;
padding-right: 35px;
width:500px;
height:500px
You can have multiple background images
see the EXAMPLE
Here is my css:
.sprite_box
{
background:
url(http://i.imgur.com/On0lt.png) -162px -551px no-repeat,
url(http://i.imgur.com/On0lt.png) -200px -530px no-repeat,
transparent;
height: 24px;
width: 81px;
margin:5px;
}
Read about sprite here
Here you can create sprite image
Here you create css for your sprite image
Yes, you can have multiple background images, but it is limited to box items. There is some info on this at CSS3.info
Yes, you can. The shorthand method is less verbose:
.sprite {
background:
url(http://www.google.com/images/srpr/nav_logo41.png) 0 -243px no-repeat,
url(http://www.google.com/images/srpr/nav_logo41.png) 42px -93px no-repeat,
#ccc;
width: 160px;
}
Note that you can only state one background color, and you state it at the end of the declaration.
See it in aciton http://jsfiddle.net/TMHPh/
I changed the background of my discussion forum using the CSS below
http://forum.antinovaordemmundial.com
html {
background: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg) no-repeat center center fixed;
background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: fixed;
background-position-x: 50%;
background-position-y: 50%;
background-origin: initial;
background-clip: initial;
background-color: initial;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The image is 1600x711 and 88k. The scrolling of the pages are now very slow. Is the CSS problematic or the image should be smaller somehow?
Edit: I tried changing to:
body {
color: #000;
font-family: Verdana, Arial, Sans-Serif;
font-size: 13px;
text-align: center; /* IE 5 fix */
line-height: 1.4;
background-attachment: fixed;
background-clip: initial;
background-color: #51010E;
background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
background-origin: initial;
background-position: initial initial;
background-repeat: initial initial;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
But it is still very slow on scrolling.
I thought I would just contribute here. Rather than use background-attachment: fixed; use :before and position: fixed; problem sorted. I ran into this same problem.
Read more here: http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property
I had the same problem and solved it using this jQuery plugin :
http://srobbin.com/jquery-plugins/jquery-backstretch/
It doesn't use any CSS3 property but it works fine and doesn't have any performance issue on Chrome 13 or Firefox 6.
The problem goes away for me when I remove the background-size property. I think it was the scaling of the large image that was causing the problem. If that doesn't work, just remove the background image altogether. However, I've never heard of a large background image causing lag before.
Also, applying the following style to the html tag improves the frame rate significantly in WebKit browsers, Chrome included:
-webkit-transform: translate3d(0,0,0);
This works in all cases with (large) background photos and choppy scrolling as far as I can tell.
The issue is actually with the background-attachment fixed value if you change it to background-attachment: scroll for mobile devices it should fix the lag.
make the background-size to 99.9% not 100% or cover in the case of the fixed attachment
background-size : 99.9%;
Compressing the image (reducing the size), solved my issue, I highly recommend using a tool like Radical Image Optimization Tool (RIOT), very effective and easy.
On linux, this can be done using GIMP , you can also remove image's metadata to reduce the size, use tool like exiftool.
Changing your image file type to SVG significantly improved the performance of my site when experiencing the same issue!
Remove background-repeat property if you have included and don't use 100% value for background-size..
background-size: 0 - 99.9%;
I'm designing a clean style to use in some web apps. And I've come across a IE bug (always the same).
Well its pretty simple. I have a gradient background, and on top of it a rectangle with no border and its filled with nothing and with a shadow around it, giving the illusion that its on top of the background, as you can see in the snapshot.
Its displayed well in all browsers except IE. IE displays like this.
IE increases about 4 px to the top div with the class "content-top-shadow". And it shouldn't. I have used margin and padding 0 to fix it and no luck.
PS: The png's have transparency.
Any idea how can i fix this bug, or whats wrong in the CSS?
Thanks.
Here is the code:
HTML
<div class="content-holder">
<div class="content-center">
<div class="content-top-shadow"></div>
<div class="content-center-holder"></div>
<div class="content-bottom-shadow"></div>
</div>
</div>
CSS
.content-holder {
width: 100%;
height: 570px; /*once complete change to auto*/
background-image: url(images/content-holder-bg.png);
background-repeat: repeat-x;
padding-top: 20px;
text-align: center; /*IE Bug Fix to Center the other divs inside this one*/
}
.content-center {
width: 918px;
height: auto;
margin-left: auto;
margin-right: auto;
}
.content-top-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-top-shadow-bg.png);
background-repeat: no-repeat;
}
.content-center-holder {
width: 918px;
height: 200px; /*once complete change to auto*/
background-image: url(images/content-center-holder-bg.png);
background-repeat: repeat-y;
}
.content-bottom-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-bottom-shadow-bg.png);
background-repeat: no-repeat;
}
IE thinks your div should be bigger than 9px, because of text size, even if there is no text in it (!), so you need to set
font-size:1px;
or something like that, on the top and bottom divs.
Here's something that helps me overcome cross-browser incompatibilites when it comes to empty spaces especially within DIVs and TDs. Place this as the sole content of the empty space, while making sure your spacer.gif image is a 1px x 1px transparent dot. Cheers!
<div style="width:1px;height:1px;visibility:hidden;overflow:hidden;clip:rect(1px,1px,1px,1px);color:#FFFFFF;font-size:1px;"><img src="/images/spacer.gif"></div>