I have an image that has some white on the edges, and I want to change the background color of the div that the image is contained in. Now when I do this, I can still see the little bit of white surrounding the image, and it looks terrible.
Is there a way I can change the background color of the image to whatever the background color of the div is, and would this be the best way to do it? Or does it make more sense just to edit the extra white out of the image.
You should just fix the image.
If the image has a transparent background then you can change the background color the same way you would a div.
Edit You may also want to check to make sure there is no padding, borders, ect. that would cause this issue to happen
Related
I have a page with a black, starry background and the navbar has white text. The navbar stays at the top when you scroll, and the links of the navbar become almost invisible when they pass over other images on the page because the navbar is transparent. How can I invert the color of the text based on whatever is directly behind it?
You want to use mix-blend-mode: difference;, like here: https://jsfiddle.net/avdeoq97/
But it would be better to give your navbar a different background, like a dropshadow with a glass effect, so it can always be seen. The inverted colour alone might not be very accessible.
I am not sure how to change the background of an image tag in css. For example, I have a darker background in my webpage. Let's say I include an image of a purple X with a white background. How would I change the background of that purple X image to be the same color as my body.
You could add mix-blend-mode: multiply; to your <img>'s css. It will render the white 'transparent' but it'll also alter the other colors in the image.
Best solution would probably be to use transparent PNGs.
How can I change the white color to the red, but only white should be changed, the rest should be what they are.
Using only CSS
CSS can't be used to dynamically edit certain pixels of an image, as far as I know.
Alternative solutions:
You could overlay another element over top of the image with a partially transparent red background to sort of "paint" the image red, but this wouldn't achieve exactly what you're asking for.
You could have another image to switch it to that has the red background. You'd switch the image likely by doing something like background-image: url(https://new_image_here)
You can use JavaScript or similar to modify the image or provide a fancier solution...
I have a question, since I couldn't find any solution yet.
So I have this image, which is fully transparent in the "center" and partially on the border as you can see. What I'd like to achieve is, the "border" should be transparent and the "center" should be red.But the border should be fully transparent. So in this case, white.
I'm not sure if is this even possible with CSS or HTML, the reason why I need to do this in CSS or HTML because I'm looping through the database, and every displayed record would have a different background color, but the "border" should remain transparent. So creating the whole image in 10 colors or more is not an option for me, because then the site might would be too heavy.
Thank you very much guys,
Mark
EDIT:
http://i.imgur.com/yMRxtqY.png
So to be more precise, I've created another image, what I want to achieve.
At the start I got the 2 images on the left side, the first one on the top is fully transparent in the middle, and has ~50% opacity on the border as you can see, so partially transparent. The second one is just an image, but the second image is always changing, like a slideshow.
The other image to the right would be the final result, I've set a gray background to be more visible. So what I have in my mind, is that possible? What I want to achieve is to cut the slideshow images border like this. But I don't want to photoshop every image which is in the slideshow, so I was thinking, maybe I can achieve something similar like this with CSS. I'm thinking in some z-index, or something. But thats not working, because I get an image like what I've linked on the top.
This is all I got: http://i.imgur.com/g7xpgQG.png
My problem here is, I can see the image on the partially transparent border, I'd like to get something similar what is on the first image on the right (without the blue things of course, I couldn't cut it, I'm not a designer :P )
Not sure if this is what you're looking for, but take a lok at this link : http://css-tricks.com/transparency-in-web-design/
You might have to take a look at the PNG file format you're using.
I have a page with a large background image. The menu and main content portions are 900px and centered. Rather than just fill the menu background with a color, I'd like to simply blur the background image. I'd also like the blurred part to move appropriately when the page is resized so I can't just blur a section of the background. How is the best way to achieve this? I tried putting a semi-transparent .png as the background to my menu div but that didn't work, I didn't see any effect. Does anyone know how to do this? Thanks.
The site that inspired the question is this one: http://www.bluespooncoffee.com
http://jsfiddle.net/MAbpx/
background: rgba(255,255,255,0.5);
This makes the background of something semi transparent because the last value is the alpha (transparency value). Adjust as needed.