I'm having a bit of trouble with IE downscaling CSS background images using the background: and background-size: attributes, as below
.llifLogo {
background: url(images/llifmonotagline.png) no-repeat center;
background-size: 550px;
position: absolute;
top: 60px;
width: 100%;
height: 170px;
}
The site is live on http://llif.co.uk. Looks great in other browsers, but IE appears to downscale the image using nearest-neighbour rather than bicubic. I understand that there used to be a hack by using -ms-interpolation-mode: bicubic;, but that this is now deprecated.
Anyone have any ideas how to downscale background images nicely in IE?
I should also add why I want to do a background image rather than just a regular image: it's so that I can use media queries to display a different image when the site is in a narrow viewport such as a mobile device.
Thanks!
The best (and probably the only) way to do this is to resize your .png file.
There's no reason to use 2808x1024 png with file size about 85KB, when you can resize your file to 550x201px and it will have ~15KB and will be nicely rendered. Just use #media queries to switch between pngs with different resolution.
Related
So I'm trying to embed an image in my react app and I'm struggling with sizing and quality. My image is like 1800x900 pixels and I only need the image to be like 300x150 which makes it reasonable for me to think there will be no problems with its quality. But then I upload my photo to imgbb and place the link in the src attribute and it looks full on blurry on my webpage.
What's weirder is that if I zoom in using my trackpad on my laptop, it regains quality and I see that its not actually blurry. So what am I doing wrong exactly? Is it the way I'm linking my image, the way I'm sizing it?
<ProjectImage src="https://i.ibb.co/TRbML9h/financee.jpg" alt="financee" />
const ProjectImage = styled.img `
width: 290px;
height: 154px;
border: 1px solid black;
`
Add object-fit: contain; that will adjust image according to parent div or respected image size
More Properties:
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;
It looks normal to me I think, but my 20/20 days are long gone
https://stackblitz.com/edit/react-lkkkwk
It is a pretty large image that is being super compressed
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'm creating a new website for myself, and as a photographer/videographer, image content is the first thing I want people to see on my page.
Here is my code so far.
HTML:
<div id="slideshow_background">
<img src="IMAGEADDRESS.JPG" class="slideshow" align="middle"/>
</div>
CSS:
#slideshow_background {
width: 100%;
left: 50%;
margin-left: -50%;
overflow: hidden;
text-align: centre;
z-index: -1;
position: absolute;
margin-top: -100px;
margin-left: -50%;
max-height: 700px;
}
img.slideshow {
width: 100%;
min-width: 700px;
display: block;
text-align: center;
vertical-align: bottom;
}
What I am trying to achieve with this, is what is done here: http://www.atcofficial.com.
As you can see, the image stays centred whatever the window width is. It also scales up/down depending on how zoomed in or out you are. This site is made with Squarespace, so I'm imagining it's some form of fancy javascript/jquery or something along those lines.
With CSS, I am able to get the image to either stay centred, OR to scale up and down, but not both at the same time. That's what I'm trying to achieve here. Is there away to combine the two so that this is possible?
Try using CSS background-size:cover;. Cover shrinks and expands to fit various window sizes, without distorting the image. If the screen size ratio is different than the image, than it will crop the edges depending on how you have it positioned (top, bottom, center, right, left, center). Keeping the image in proportion is the key feature of background-size:cover;. Because its a background and not an image, you can easily place elements on top of it.
Here is a JSFiddle Example you can play with. Expand and contract the window to see the background image adjust in size. The only code your are interested in is listed below. (The rest of the CSS in the example is for styling only, and to make the div display at 100% width and height).
background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Follow Up
Yes, there are CSS3 slideshow galleries. Here is one that looks attractive, and is responsive: https://github.com/css-slider/image-slider. Here is a tutorial on creating a CSS3 slideshow from Smashing Magazine: http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/.
You probably already know the information below, but what you have to check into before investing much time in the technology (CSS3 or JavaScript), is how the gallery will display on older browsers and handheld devices, and is there an easy work-around for these devices.
One technique would be to place the gallery in a separate div that can be hidden for older browsers/devices. Then use the background-size:cover, or another technique, as a fallback. Also remember that IE10 and IE11 on a touch screen can be glitchy, and need testing as well. Without going to far beyond the scope of your original question, there are several good ways to detect devices/browsers including Modernizr, Matt Stow's Layout Engine, Categorizr.js and Internet Exlporer's Conditional Comments.
Side Note: The example website listed in the question displayed a large single image as background, and if there was a slideshow, it was not working on this end using the latest version of Firefox.
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;
}
}
I am looking to achieve a similar effect to this website i found: http://www.august.com.au/
When on this website if you zoom in/or out ctrl +/- the background doesn't change. Only the content zooms.
I want to be able to set a background image for my website and have it so that the background image always fills the screen regardless of the screen resolution or zoom options.
I understand that you can use the width:100% to make it fill the page, however my understanding is that this is applied as the page is loaded and if the user zooms after loading the image will not re-sized.
Does any one have any suggestions on where to start with this one? I have tried search the web for information but wasn't able to find very much.
Also i am guessing this will be achieved using something like JavaScript and not css??
This worked for me in chrome, firefox
.someImage {
width: 7%;
height: 0;
padding-bottom: 7%;
background-image: url('../img/myImage.png');
background-repeat: no-repeat;
position: fixed;
bottom: 5%;
left: 5%;
background-size: 100% 100%;
}
Turns out there is a nice Jquery plugin for this:
http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/
Seems to work as i expected.