I am using one picture as my background of header of my blog.
CSS i have used is
#header-wrapper {
height:125px;
padding: 0px;
margin: 0;
background: url("http://3.bp.blogspot.com/_lxBSX0YJV58/TOspWPI1r-I/AAAAAAAAA34/uw872WFS3ME/s1600/headerbg.jpg") top center no-repeat;
background-size: 1120px 124px;
}
original width of an image is 990 px and i made it 1120px using property
background-size: 1120px 124px;
It looks okay in firefox 4 and Opera 11 but doesn't work in IE 7, Palemoon etc. image size does not increases and remains 990 px.
You can check my blog HERE
Any help...how can i make it compatible with all browsers ?
Do i need to use another property ?
background-size is a CSS3 property, and as such, it is not understood by ancient browsers. You might like this post, explaining various approaches to scaling background images.
I would suggest making the original image the size you want. Even if all browsers supported this CCS3 feature there is no telling what way they are going to implement it which may leave you with a distorted looking image.
Related
On my new webpage (http://patrick-ott.de/ -- it is getting there ;), I seem to have encountered a problem. At the very end there is a promise for a non black/white-version but it does not show the fully colored image. That is fine, I do not want the background to scale in width (or maybe when the resolution of the display exceeds the one of the image) but I do want to see the full-length version of the background, so essentially you can keep scrolling longer. Any ideas on how to do this smart? Right now the CSS for the background is as simple as this:
.colorbox {
background-image: url(pictures/colorbackground.jpg);
height: 100%;
width: 100%;
position: relative; }
set background-size
background-size: 100% 100%;
Add this to your CSS:
background-repeat: round round;
That should do the trick. But this is a pretty new feature in CSS so it will work if you expect your users to be using IE9+ and other modern browsers.
I have the very simple task of applying a background image to a DIV. I can view the image with every other browser except Safari. Can someone take a look at my CSS and site and tell me what I'm doing wrong.
CSS:
#intro2services {
background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url(../img/colorpencils.jpg) fixed;
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Site:
www.designedbysheldon.com
I played around with your site for a few minutes, and I suggest breaking up your styles for the background rather than condensing some while having others declared on their own. Change your CSS to:
#intro2services {
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
background-image: -moz-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)),url('../img/colorpencils.jpg'); /* Firefox-specific background styles */
background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/colorpencils.jpg');
background-attachment: fixed;
}
That removed the repeat, applied the gradient, and applied the cover sizing correctly. This is tested and working in Chrome and Safari. Firefox only works when the -moz vendor prefix is added. You can add the other vendor prefixes to be safe, but gradients are implemented in the other major browsers at this point.
This is a know issue with Safari. Most of the time, adding a negative z-index to your style, will solve the issue.
z-index:-1:
Apparently Safari--or at least some versions of it--refuses to apply CSS to form fields, so if you have a clever little search box like I do, Safari won't render any CSS applied to it. I thought it was specific to my use of SVGs and then I thought it had something to do with the short code. I was stuck until I found an obscure post on GitHub from a MarcHaunschild from 2011 discussing this behavior. Anyway in the case that you're trying to style a field such as a search box, here's the fix.
Add the following to your CSS:
input[type="search"] {
-webkit-appearance: textfield;
}
I have a div set with a background image:
<div>Play Video</div>
with the following CSS:
div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}
The background size is respected in Firefox, Safari and Chrome. In IE8, the SVG is replaced by the PNG file. However, in IE9 and IE10, the SVG file is drastically sized down. The problem seems to be linked to the width and height of the div. If I add a height of 150px, the SVG is rendered properly. If I make it smaller (i.e. 100px) the graphic starts to shrink.
Has anyone found a way to fix this issue in Explorer? Is there a way to tell IE to use the background-size value independently of the width and height of the div?
Be sure that your SVG has a width and height specified. If you're generating it from Illustrator, ensure that the "Responsive" box is unchecked as this option removes width and height.
Adding a width and height to the SVG as mbxtr said nearly worked for me. I needed to add preserveAspectRatio="none slice" as well to get it working responsively in IE.
For me these 3 fixes helped:
If possible set the background-position to "center"
For background-size set both values, "100% auto" won't do the trick, so use "100% 100%"
If that still doesn't help alter the last to values "viewBox" attribute of the SVG itself and make it one pixel wider and higher than the width and the height of the SVG. This shrinks the SVG a little bit, but stops IE from cutting it off - and the smaller size won't be noticed at all.
I had this issue and I found that either removing the height and width inside the code for the svg BUT keeping the viewBox can solve the issue.
I recommend using a compiler site like : https://jakearchibald.github.io/svgomg/
and setting the option to "prefer viewBox over height and width"
ALSO if none of this works, in Illustrator try applying a square background around the svg image but leaving enough padding around the edges.
And import the svg's in your Stylesheet using --> data uri: ...
example:
background-image: data-uri('image/svg+xml;charset=UTF-8',' where/your/svg/is/located');
Well, it doesn't look like there is a solution. Surprise surprise. It's IE after all. I ended up using the following code:
div {
padding: 20px;
width: 150px;
position: relative;
}
div:after {
position: absolute;
content: "";
width: 40px;
height: 40px;
top: 50%;
right: 30px;
margin-top: -20px;
background-image: url('icon.png');
background-image: url('icon.svg'), none;
}
I liked the cleaner version better, but this hack works in all modern browsers, including IE8, 9, and 10 (probably 11 but I didn't test).
We had a similar issue with SVG background images that weren't the full site of a containing element (such as the magnifying glass at the left side of a search input).
We'd created out SVGs in Illustrator CC but running them through Peter Collingridge's SVG optimiser to take out all the unnecessary cruft did the trick. http://petercollingridge.appspot.com/svg-optimiser
I tried #mbxtr's solution
Be sure that your SVG has a width and height specified. If you're generating it from Illustrator, ensure that the "Responsive" box is unchecked as this option removes width and height.
That still didn't work for me on windows Chrome and IE.
I was exporting a font icon, so if you have a font, make sure you export it as:
"font: convert to outlines"
and "responsive" is false
I also unchecked "minify" just in case...
1. javascript
drips.style.top = -dripsTop + "px";
var browser = window.navigator.userAgent;
if (browser.indexOf("Trident") > 0) {
$(".flow_space").css({"background":"url(../img/space2-ie.svg) no-repeat", "background-size":"100%"});
}
svg (original height=1050)
add directly to himself svg file
preserveAspectRatio="none" height="2100"
Svg background image size will render same on IE and Chrome using these properties
background: #ffffff url("images/calendar.svg") no-repeat;
border: 1px solid #dddddd;
float: left;
margin: 0;
overflow: hidden;
background-size:15px 15px;
I changed all my SVGs to not responsive in Illustrator to no avail.
And because I am looking for code examples I missed that the correct answer, when saying "ensure your SVG has a width and height specified", they meant this kind of thing:
.my-class {
background-size: 200px 100px;
}
And if the size is a bit off in IE vs Chrome for example I used a media query to target IE:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.my-class {
background-size: 200px 110px;
}
}
There a few questions that revolve around my problem, but none of the answers pertain to what I'm trying to do. I'm using a sprite for my site logo by using a class on an anchor tag. Problem is that I have to define the pixel height and width and this prevents the logo from being responsive.
Here's the HTML:
Here's the CSS:
a.logo-sprite {
background: url('image_here.jpg') 0 0;
display: block;
width: 450px;
height: 130px;
}
a.logo-sprite:hover {
background: url('image_here2.jpg') 0 -140px;
}
Any thoughts? Thanks.
That's right. Since sprites, by definition are meant for fixed dimensions only (They are images after all), they cannot be "smoothly" used in fluid/responsive layouts.
They can be used in responsive layouts, as long as you keep making adjustments for each "level" in your media queries.
Okay, I have an idea.
You can use the background-size property to "lock" the sprite in place and stop more/less of it being shown than you want. Here is a rudimentary example:
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 190% 140%;
The only problem here is that images resize differently to elements like Divs and anchors so the height won't scale dynamically. I believe the only way to achieve this is to use JavaScript but I may be wrong.
Here's a rough example of how you might start going about something like this:
http://jsfiddle.net/VW2dW/16/
If you resize the browser you will notice it successfully scales horizontally but not vertically which is a problem.
I've decided to crate a sprite sheet for my entire site (+-30 images) so I can load 1 image and just reference positions, which reduces image load time and server calls.
My question:
Is it possible to reference an image in the sprite sheet and then size that image to 100% of its parent container?
So For example:
#SomeDiv
{
background: url("/Content/Images/SpriteSheet.png") -125px 0 no-repeat;
width:100px;
}
The width of my div is 100px, but the sprite I want to reference is 20px(for example) - how can I streth the extracted sprite to grow to 100px?
Regards,
Byron Cobb.
Well, if you really want an answer, sure, why not. See: http://jsfiddle.net/3dsgn/3/
Basically we're working with CSS3 here, so IE support (except 9) is non-existent. You'll also have to use the version with the -moz- extension for Firefox 3.6 and below. The technique itself is also somewhat troublesome. You actually have to go and calculate the numbers yourself - percentages won't work, naturally.
#sprite-large {
/* All of these numbers are 2x their normal,
though tweaked slightly so that they will look okay */
width: 36px;
height: 36px;
background: url('url/to/your/image.png') -38px -112px;
-moz-background-size: 448px 368px;
background-size: 448px 368px;
}