I have this in my css file:
.apiscar1 {
object-fit: none;
object-position: -354px 0;
width: 85px;
height: 155px;
}
.apiscar2 {
object-fit: none;
object-position: -189px 0;
width: 155px;
height: 155px;
}
And I call the sprite.png img src on my wordpress page.
This works perfectly for a lot of images placed into the sprites.png but it doesn't work in IE. How do I make it work in IE?
Object-fit and object-position are not supported in IE/Edge.
I use a workaround where I set the image as a background on an element, background-size can be used as replacement for object-fit and background-position for object-position
Here is a jsfiddle with your example. https://jsfiddle.net/124f0hve/
.apiscar1 {
background-image: url("http://lorempixel.com/400/200/");
background-size: cover;
background-position: -354px 0;
width: 85px;
height: 155px;
}
.apiscar2 {
background-image: url("http://lorempixel.com/400/200/sports/");
background-size: cover;
background-position: -189px 0;
width: 155px;
height: 155px;
}
I used lorempixel images, you get random images on every change. If you look in the network, you will see the full image that was fetched and on the screen it shows only a portion of it.
I hope this helps.
Make some div with position: relative as a wrapper and image position set as a absolute. Then use top, right, left, bottom to set position of image. This is workaround for object-positioning for IE.
Related
I am using
object-fit: cover;
in order to have an image fill a div of a fixed size, like this
.home img {
object-fit: cover;
width: 650px;
height: 300px;
}
However, the image is cropped equally all around, as I have text in the bottom right of the image, I want to have cover to crop from the left and top.
Is this possible?
I tried all the object-fit methods and object-position, but none give the desired behaviour.
You can add a object-position to the img, bottom right in this case.
img {
width: 200px;
height: 200px;
object-fit: cover;
/* added */
object-position: bottom right;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" />
I am 100% at a loss as to why I cannot get a background-image to display. I have tried multiple different images to rule that out. I have also changed src to url, changed the background-size from cover to auto 100%. Nothing I do will get the image to display.
Does anyone see why my background image will not display?
#home-img {
background-image: url("http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
width: 100%;
height: auto;
position: relative;
}
<div id="home-img">
</div>
Here is jsfiddle
If you use backgound-image and you don't have content inside div, you always should set height. Here is example https://jsfiddle.net/5pphkLmt/5/
<div id="home-img">
</div>
#home-img {
background-image: url("http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
width: 100%;
height: 540px;
position: relative;
}
Using Chrome Inspect, I changed the #home-img height from "auto" to 537px and then the image appeared. So updating the height is one option to fix this issue.
Another option is covered in this SO Q&A entry.
How to get div height to auto-adjust to background size?
you should add height to your code or put something in this DIV, just test height: 100px; and enjoy it :)
i am trying to create a page that has a background image in between a header and footer will work on any screen size.
I have managed to create the page and it works fine on desktop screen. The problem i have is when I resize to mobile size screen then the background is repeated.
Here is my code:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: none;
border: none;
}
Has the height attribute set at a specific height, but i am not sure how i can change this so that it works on all screen sizes.
The site can be viewed at: http://s116169771.websitehome.co.uk/testsite/
If somebody could please advise on how i could fix this, would really appreciate it.
Thanks in advance.
none is not a valid value for background-repeat, use no-repeat instead.
background-repeat property (MDN) (W3Schools)
Here is a list of possible values for background-repeat, you need:
background-repeat: no-repeat;
None doesn't exist for this property.
Use background-repeat:no-repeat
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
or simply short the code
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100%;
border: none;
}
Change background-repeat: none; to background-repeat: no-repeat; none is not a valid value for background-repeat property.
Your code should be:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
You can also use short hand css background property as follows:
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100% auto;
border: none;
}
More Details
It works fine if I set the image source as a CSS background-image property, but it breaks altogether if I set the image source via HTML. Why?
.image1 {
height: 100px;
width: 100px;
background-size: cover;
}
.image2 {
height: 100px;
width: 100px;
background-size: cover;
background-image: url('http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg');
}
<img class="image1" src="http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg"></img>
<img class="image2"></img>
To let this images show correctly no mattery the width/height combination, am I forced to declare their source from CSS?
edit: not sure what the question downvote was for...I just wanted to know if it was possible to let images be automatically cropped so they can keep their original aspect ration even if you change both their height and width independently. This works flawlessly when using background images, but apparently not with content. Either way, I got my answer now.
On browsers other than IE, you can use the object-fit: cover instead of background-size.
.image1 {
height: 100px;
width: 100px;
object-fit: cover;
}
.image2 {
height: 100px;
width: 100px;
background-size: cover;
background-image: url('http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg');
}
<img class="image1" src="http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg"></img>
<img class="image2"></img>
Here is a demo. I want to get full fit the background image withouth streching. Because when i resize window image will be distorted. If i change the css with
position: absolute;
width: 100%;
height: 100%;
background: url("http://farm9.staticflickr.com/8100/8601158004_173413335e_k.jpg");
background-repeat:no-repeat;
image doesn't strech anymore but then image will be enormously big. How can set the background image properly?
I will appreciate for any help.
You can use the background-size-property cover for this:
#homee {
position: absolute;
width: 100%;
height: 100%;
background: url("http://farm9.staticflickr.com/8100/8601158004_173413335e_k.jpg");
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
http://jsfiddle.net/G2Rhq/4/
Update
If you've to support oldIE try my super-simple jquery plugin for this:
https://github.com/yckart/jquery.fitpic.js