Ref: https://github.com/twbs/bootstrap/pull/28072
It looks like the img-retina() mixin has been deprecated with the suggestion that we should use responsive image tags (I assume this is pictures with source sets?) and object-fit for background images?
Is there a standard/accepted way to replace/replicate the old retina background approach?
This blog post indicates that we should use position:absolute; images with source sets?
https://jasonyingling.me/better-performing-background-images-with-object-fit/
However I'm not sure this is suited for a tiled/repeating background image?
Related
I have a image of a background that looks like a wrinkled paper and I am trying to make the same background using CSS instead of the image.
is that even possible to make using css?
this is the image:
I don't think that this is possible to do with css (at least not efficiently)
We are using the background-image style for one component in our application. we need to make it responsive with different resolution images. I have seen that we can make use of image-set to achieve it and implemented it as below and working as expected.
Please see the below code snippet I have implemented.
<div style="width: 50%;height: 50%;background-repeat: no-repeat; background-image: -webkit-image-set(
url(smallCat.jpg) 1x,
url(BigCat.jpg) 2x)">
</div>
Now, I would like to give a specific resolution of the screen in place of 1x,2x.
Since it is possible in srcset with sizes, do we have any way to set sizes for image-set?
Please let me know your thoughts.
Thanks.
Nah, there is no syntax for this. But:
Another difference, is that unlike with the srcset attribute, where you can also give image options based on the width of the browser (when art direction is required), you cannot do that with the image-set. However, art direction can still be achieved in CSS using media queries!
Source: Creating responsive images with image-set
So, if you want to rule all the images using CSS only, use media queries.
I make a website, and actually i have a simple rectangular images.
I want to design my image and make a design like below.
So i tried to create a svg, and i wanted to put my picture inside .. but the problem is that svg cant be responsive.
Can i do it in full css ?
Or it's better to use a SVG ?
The best way could be to use Photoshop and design the picture, but if i can make it in css or using svg, it's better. i know that some website have similar design for their pictures, how they do ?
Is there a way to use sprites without using the
background: url();
property?
For example, is there a way to use sprites with
<img>
tags instead?
The reason I ask is because I am trying to use CSS sprites in a fluid grid system and I need to be able to control the max-width of the image.
So you're wondering if you can crop an image various times in different spots?
Yes it is possible. Here are a few posts explaining these techniques:
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp
http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
Is there a way to create a background like so in css? I didn't know how to describe it so google coudn't help me. Thanks!
You might be able to do it with an SVG image, but be aware that the support could be spotty. It would probably be easier to just create it in Photoshop or GIMP and make it really big (say 1620x1080)
A quick search on CSS and SVG backgrounds came up with this page; but it's from 2009.