That's a screenshot of my blog on Tumblr, on Chrome those black borders aren't existent, both images are PNG with a transparent background, how can I make those ugly boxes disappear? I've already tried following a few threads here on the subject, and they didn't work.
Hmmmm. That's really strange, Snipping Tool didn't capture the black boxes, but print screen did. here's the print screen image.
Without more details that is hard to say did you try to add this css?
img {
border:none;
}
Related
I added this svg logo to my website. I saved it in illustrator with not background and when it pops up in the web browser its has a white background. Not sure how to fix this or what the problem may be.
heres what it looks like on my end
Here is a fiddle
https://jsfiddle.net/n3ov9czj/
<img src="images/logo.svg" />
Is this what you are trying to do?
Jsfiddle 1
Or was it more like this?
Jsfiddle 2
This obviously didnt work :(
svg { background: transparent; }
It looks as if your linked image (logo?) black areas are actually transparent, showing the background. White areas are actually the (logo) image. It's kind of a negative youre trying to accomplish in that case, I guess. I can see some text behind the letter h. It would be really more helpful with the actual svg logo image to figure out the problem.
Simply test colouring the image background.
<img src="images/logo.svg" style="background-color:grey"/>
If this is the case, then you probably want to apply the background image behind the logo or whatever was the idea you want to implement.
I really do not get this. I am making a landingpage:
Landingpage
If I look the responsive design on Iphone 5, 6 and 6+, there is a grey background behind the logos. It is also appearing under the form. The background image should go to the top. I have been looking through the code for hours, but cannot find the answer. Can anybody see why?
Just add .fullscreen {background-size:cover;}
The grey background you see is just the body color because your background image doesn't take the whole space.
I want to recreate an interface similar to Windows Phone 10.
You can see an example of what I try to achieve in HTML in this picture:
The middle tiles act like Windows on the baby picture while the space between tiles is black.
There's no magic going on here. In the picture you've supplied the phone has a desktop of a child that is letterboxed (black stripe across top and bottom). The tiles on the top and bottom of the screen are opaque and show their own backgrounds. The tiles in the middle are fully transparent, but have a solid black border to them to show the child behind them.
To make the tiles, you simply need this:
.tile { background-color:rgba(0,0,0,0);
border: 3px solid black;
}
Take a look at this fiddle for a basic example: https://jsfiddle.net/Lnafvvx9/6/
For a dynamic approach:
You could slice a picture in many litte parts (and delete the sliced borders). Then you create and align different divs with a individual background image containing your sliced picture parts.
There is also a kind of work around for static pages:
Create one div with the big (not sliced picture).
Use a transparent PNG image containing only the "border" of the black background. Place that in a div on top of the other div and you got the style. Then you need to add little divs ontop of the positions where you can see the picture.
The important thing is, that these designs require pixel perfect static layout. This means you can't scale divs size or change the position when the browser window or screen is smaller. But its also the easiest way do do that and the last suggestion allows to change the picture without slicing it.
For real dynamic approach you could load the same picture (unsliced) in every button (use different css id for everyone) and position the background of them individually to fit together. The advantage of this is, that you can then use CSS3 for instance to scale the button size on hover. This can lead to a cool expanding image effect. Just look up
http://www.w3schools.com/cssref/pr_background-position.asp
http://www.w3schools.com/css/css3_animations.asp
I hope that helps :)
I'm using transparent forum icons, but I've a problem with the white background of the image:
How can I remove it using CSS or a software?
Thanks.
Are you trying to make your image like this where the white is transparent?
Photoshop took about 2 seconds. Select the white and delete it.
Save the images in the .PNG format. JPEG images can not handle transparency. Photoshop has this capability.
If you are attempting to re-size the image after being inserted, then try the following code in the css part -
background: transparent url("/static/img/image.png") center center no-repeat;
Okay, the problem is now fixed. I changed the white background to the same background of my element: http://prntscr.com/5upc73 and http://i.imgur.com/LcHwecs.png
I've recently added an image to my website, where the image is wrapped in an anchor tag, like this: .
The problem is, that this image has a border, but only in firefox; no border is showing in chrome. I want the border to go away. I have set in the css for both the a and img tags, the following:
text-decoration:none;
border-style:none;
border:none;
outline:none;
box-shadow: 0;
-moz-box-shadow:0;
background:none;
color:white;
The image is a small gray icon on a white background, and I have double checked it in gimp and there is definitely no border around the image. So, what have I missed? Where is it coming from? Why does it only appear in firefox? And how do I make it go away?
Firefox version is 17.0.1
So, what have I missed?
The 90s and 00s.
Where is it coming from?
It's coming from the browser's default stylesheet.
Why does it only appear in firefox?
Browsers seem to make up their own rules on whether they display a border around linked images or not.
And how do I make it go away?
a img {
border: none;
}
Unbelievably, I found the answer - turns out that I had zoomed in, and I didn't notice because it was only by one. Wasn't until I went and pasted the entire contents of my page in jsfiddle that I noticed the sizes were marginally different.
Apparently, when firefox zooms in it adds borders to images. Can't imagine why, but once I zoomed out the borders went away. Problem solved, I guess. Just wish I'd found this sooner - it's been bugging me for days!