This question already has answers here:
CSS Sprites and repeating backgrounds
(2 answers)
Closed 7 years ago.
Using css sprites for icon-style images is best practice by now and pretty easy.
Using multiple repeating backgrounds in one image is traditionally only possible if they either use only vertical or horizontal repeat.
Or is it? Meanwhile with css3 and html5 and all stuff, is there a way to combine multiple background images in one css sprite to make an background pattern and use vertical and horizontal repetition?
Edit/Note: I know this is not the first time such a question is asked. But most/all answers I found are some time ago. I'm just wondering if there is a solution today.
Edit: To illustrate what I'm looking for: http://ibin.co/21LqyJvnGdMB
Yes you can use css sprites for repeating background.
The rule is pretty simple: if you want the background to repeat
vertically (top to bottom), place the images in the sprite
horizontally (left to right) and make sure the individual images in
the sprite have the same height. For the opposite case: when you want
to repeat horizontally, sprite vertically.
check this article for better understanding. http://www.phpied.com/background-repeat-and-css-sprites/
Related
This question already has answers here:
CSS Only Pie Chart - How to add spacing/padding between slices?
(2 answers)
Closed last year.
If possible I would like to create this image in CSS. So far I have not been able to do anything even close to those edges with text. Is it even possible and if so how should I approach it?
To turn your div into a circle you can apply the following property: border-radius: 100% Now if you are asking about the curved text, here is an article that might be helpful: https://css-tricks.com/snippets/svg/curved-text-along-path/
This question already has answers here:
disable subpixel aliasing on html/css borders
(4 answers)
How to stretch images with no antialiasing
(5 answers)
Closed 1 year ago.
I have a problem with anti-aliasing (I guess) in css.
I've seen how to disable it on fonts and images but I'm having troubles with some borders...
Here's the thing, I have a canvas wrapped by two divs, in a grid display. It renders nicely sometimes but with certain levels of zooms, a gray line appears next to borders. I figured out it was because of anti-aliasing but I can't find a way to disable it.
With anti-alliasing
What I would like to be always there
This question already has answers here:
CSS Image size, how to fill, but not stretch?
(18 answers)
Closed 3 years ago.
I want to set some background image size using CSS.
I am able to set the size using the below css codes. I have been reading up on css formatting at w3schools, and also referred to the below stackoverflow post:
background: url([[pix:theme|cat/default]]) no-repeat center bottom;
background-size: 180px 200px;
I have tried all the methods, including contain and cover. However i keep getting the image stretched and blurred. How can I do this without blurring the image? FYI original image size is 128Kb 1210x1643px
Sooo,
You cannot stretch the image without bluring or loosing quality.
I recommend you to have a high quality image and put the image in a kinda matching background-colored div.
Then you can use either media-quires or some JavaScript to keep the image as big as possible.
Also it would be helpful to see some of your code, or have a better description what you are trying to do. :)
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 4 years ago.
Im trying to figure out how to solve this but i couldn't find a good option for .
Im trying to describe my problem with 2 pictures.
Im here to learn. Negative reputation doesn't help without saying anything :).
can i do this with pure css or bootstrap??
Also want it responsive.
First picture
Second Picture
Yes, It is possible with pure CSS.
In CSS you have to use :After & :Before for making shapes that you have mentioned.
For making it responsive simply use Flex-box grid.
This question already has answers here:
When to use IMG vs. CSS background-image?
(31 answers)
Closed 8 years ago.
Should I use the <img> tag or should I use a div with css background-image?
If you want the image displayed normally on the page, then i would suggest using
img because it can moved positioned to your prefered area alot more accurately, but the background-image should only be used if you want the image to be the background of your page or of an object.
If you need create a kind of tumbs you must use <img> .And for background use background-image.
All browsers not interpreted the css rules in the same way.
Sorry for my english =/
Well, is your image a background image? If so, then use background-image. That is what it is made for, so you should use it.
If not, then use <img>
Background images usually have elements on top of them, such as text, for example.
Images are generally elements of their own, like blocks on the page, such as a <div> for example.
Having said that, there are some "advantages" with using <img> vs. background-image. For example, background-image will disable the users ability to drag and drop the image onto their desktop. This is not to say that they cannot save the image, they can, very easily, this is just one difference between the two.