I want to make an image to fit the content.
Trimming transparent background will be needed if it is done with a photo editor.
Is there any way to deal with CSS?
Or do I have to edit image before using it?
Thanks in advance!
What I have researched about css feature:
object-fit: It was a little more about aspects
There is no such feature in CSS as far as I can tell.
However, there are two possible solutions fixing your problem.
If it has to be done for an already known image:
You could manually scale the image using background-size and background-position so it does only show the area of the image you need.
If it has to be done for an unknown image:
Using Javascript like this: https://ourcodeworld.com/articles/read/683/how-to-remove-the-transparent-pixels-that-surrounds-a-canvas-in-javascript
Related
I’ve got a quick question that’s been puzzling me for a couple of hours today. On a site I am working on for a client-he wants a complex shape but with text over it. What I’ve done in the past is use a position absolute svg with custom styling and then the text is fine as is. But the problem I am facing is the box containing the text is not as large as the svg shape so flex box is not respecting it and thus bringing the whole site up going over the svg image. I can’t think of any solutions and could use a little bit of help!
Oh and this is done in react if that makes it easier or harder.
Thanks y’all!
If you want to have text over an image, you can try to set the image as a background of your container. From there you can change the size and position of your background. Add it on your css file
.customContainer {
background: <background-image>
}
Okay! Check this and try this [https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_background-image][1]
I know there are alot of questions for the same topic but I have tried almost everything to get it work but did not succeed.
I am working on a WP theme and I have a header background image which does not scale properly when on mobile/smaller screens.
If anyone can help me scaling for that image.
Also, as this image will be a dynamic image, should I use an image tag or inline css background image?
For a reference, please have a look on the following link.
header background scaling
Have you tried "background-size" property of css?
If yes, how did you gave the values in it? in percentage or in hardcoded px because this solution works perfectly for background images. In your header's css or wherever you are having this image, do it like this, or you an specify your own percentage values according to your requirement:
background-size: 100% 100%;
If it doesn't work, let me know or if possible, please share the code so that I can guide you better. Hope this will help.
Cheers!!!
I am trying to solve a bug in ie7/ie8 for multiple background images...
I know that in originally it doesn't support in ie's but i have googled some interesting stuff on web, for example, Cross-Browser Multiple Background
Basically it is of two images background but i want to have 3 images with the defined position and size of the images via css...
Fiddle code is not working in ie7/ie8...
http://jsfiddle.net/CsKhy/4/
Can anyone help??
Use nested divs for a crossbrowser-compatible solution.
Demo:
http://jsfiddle.net/CsKhy/5/
Note: background-size is not compatible in IE8 or lower, so maybe it's better using images instead of backgroundimages.
I use
<style>
.bgImage{width:100%;}
</style>
Right after the body tag and before any other code insert this
<img src="yourimage" class="bgImage"/>
Not ideal solution but is compatible and works, I have used it many times. (make sure your image is a large image to begin with otherwise it will distort on larger screens)
I have a transparent .png image file which I have attached it on my site, however the file has some background colour (grey) which I have no understanding why it is there. It's sure in transparent mode when I open it in any image editor or view, it has transparent background. Why when I link it, and when displaying on my site it isn't transparent ?
This is the method I'm using http://book.cakephp.org/#!/view/1441/image
I've tried embedding the image in CSS but find it a bit troublesome because I need the image to be clickable that links to my homepage.
Anyone can suggest any way to achieve the result I mentioned? ..perhaps some links or scripts that would work..I appreciate that.
:-)
It's possible there's some reprocessing going on. Do you have a link to the image, or better yet a link where we can see the markup / CSS as well?
I found a way to solve this not sure if it's the best but it works.
http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/
If you're using IE6, the grey background will be there because IE6 does not support alpha-transparency in images (without using behaviours or hacks).
This might help:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
ok i need to make a whole background image so that it resizes with the window and keeps the same proportions
i need to do this only using css
does anybody know how i have looked but cannot find a working solution.
i tried some suggestions on here too but does not seem to work for me either
thankyou
You might want to read the article "Supersize that Background, Please!" on A List Apart. It presents "old" as well as modern techniques.
In order to do it in vanilla CSS, you cannot settle for less than CSS3 since both Background and Borders and Media Queries modules are required.
What you are asking for is not possible. Not with standard CSS2.0 and XHTML.
You can make an image tile, but not scale to fit your page.
The link you provided does just that, it repeats the image in a tile fashion. Background images do this by default.
Sorry, CSS can't stretch images. Only an <img> tag can do that. So you'll have to put one of those in the background.
Maybe you can do that with CSS3, I don't know, but even then browser support is not very good yet.
Here is an example of using a div (100% width + height) containing an img tag to use as the background, might be worth a look.
Try this technique: http://css-tricks.com/perfect-full-page-background-image/