I have a large dimension image that i have to scaled down through css. But in IE image getting distorted. It seems background-size property is buggy in IE.
CSS:
.img{
height: 33px;
width: 65px;
display: inline-block;
background-size: 100%;
background-repeat: no-repeat;
float: left;
background-image:url("http://www.answerplot.com/ap/media/images/croplan_logo.gif");
}
I already tried background-size:100%/cover/contain.
Working example:http://codepen.io/Mishra-Praveen/pen/revjGJ
I am fed up with this issue tried many css properties but didn't help.
Not getting any solution.
Related
(Beginner question)
Hello, I'm trying to create a site that has one long image as a background that you can scroll. Nothing fancy, just one image of 1920x3740 of which you can only see a viewport-sized section of. I added an image to clarify what I mean.
I've tried using multiple divs under each other of 1920x1080, and chopped the image up to fit correctly, which kind of worked, but they wouldn't stay 16x9 so the edges of each image didn't match up. Now what i've got is one big image but I can't scroll it.
HTML:
<div class="bgImageFull"></div>
CSS:
.bgImageFull{
background-image: url(../images/LandingPage/NEW_TAHIN_IMAGE_FULL.jpg);
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
This also goes before but I don't think it does anything for my issue:
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html, body{
height: 100%;
font-family: 'functionPro';
}
.bgImageFull {
background-image: url(../images/LandingPage/NEW_TAHIN_IMAGE_FULL.jpg);
height: 3740px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
Height: 100%; Could be what's messing this up for you.
It might be better to specify the actual height of your image in the image's class. 100% is just going to cover the available height of the parent element.
I'm having a problem centering a SVG image in the background.
Here is the CCS:
.cs-title {
display: block;
background: url("../logo.svg");
background-repeat: no-repeat;
height: 220px;
margin: 0 auto;
text-indent: -9999px;
width: 440px;
background-position:left center;
float: center;
}
Do you guys have any ideas?
Thanks!
For a logo, I would place the svg on the page rather than as a background image. Also, without more information, I would guess that the issue is with the svg itself. Have you got the viewbox propety set to the svg dimensions in the svg code, as well as height and width set to 100%?
I have one problem that I can't solve, I need my banner to be full width, not boxed. For example: the page is 1024px witdh and my banner is 800px width, now i need my banner to be 100% width. If you understand me, so, my friend and me we was trying a lot of options but we didnt figured it out.
Here is my CSS code with banner:
#banner{
background-image: url(mats/banner.jpg);
width: 100%;
height: 470px;
background-repeat: no-repeat;
position: relative;
background-position: center;
display: block;
}
I have tried everything but nothing successful.
It is background-size.
background-size: 100%;
On applying this property, your background image(800px width) would strech to 1024px, which results in image quality loss.
Better applying this property on images with width > 1200px
If the height: 470px is also intended as background height, dont use it.
Never set height & width on a image, it changes the aspect ratio. If one is set, the other will auto adjust according to, else Images looks shrinked or stretched
I think you might missing background-size
#banner{
background-image: url(mats/banner.jpg);
background-size: 100%;
width: 100%;
height: 470px;
background-repeat: no-repeat;
position: relative;
background-position: center;
display: block;
}
I have wrote CSS for div add background image that image visible on FF, CH, ... but, it doesn't show on IE 8
css file
#headerrotetor{
width: 100%;
max-width: 1600px;
max-height: 660px;
background-image: url(images/hm_bg.jpg);
background-repeat: no-repeat;
margin: 0 auto;
background-size:contain;
}
And I have maintain CSS for IE that file has
#headerrotetor{
height: 660px;
width: 1600px;
}
Background image size 340Kb, can someone help me, thank you
did you use the correct path ?
try applying background to the body tag. below code supports IE 4.0 upwards.
body {
background-image: url('paper.gif');
background-repeat: no-repeat;
background-position: right top;
}
Note: IE8 and earlier do not support multiple background images on one element.
I need to cover background in my site and I always see lags/slugs on mouse over or any other action. Do you have any idea how to fix this issue?
I have a working example here (If I didnt update the code yet) : http://natgeo.geryit.com
ul#posters li {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
float: left;
height: 170px;
position: relative;
width: 25%;
}
It appears webkit doesn't cache the resized image and renders it every time, causing the lag.
You're out of luck when it comes to background-size in chrome.
I've seen people do it with Javascript / jQuery. See http://srobbin.com/jquery-plugins/jquery-backstretch/