I have a weird box showing up around my images in Chrome. There is an example here: http://ulrikhogrebe.com/projects/bbcme.html - if you open it in chrome, and look at the first image under the header image (black and white), you will see a border around it (scale your browser if you miss it).
Tried border: 0; - but can't seem to loose it. Also, it's fine in Firefox.
Any ideas?
That's because your img tag has no src. You will not be able to remove this border with CSS.
The only way to fix this is to use the img tag correctly. You are currently setting a background image on the tag rather than using it as it is design with a src attribute.
Your current code..
<img class="article__img article__img--full" src="" alt="">
.page--bbcme .article__img--full {
...
background: url("../img/bbcme/bbcme2_784.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100%;
...
}
Correct usage...
<img class="article__img article__img--full" src="../img/bbcme/bbcme2_784.jpg" alt="Image description">
If you for some reason need to use an img with a background image, you can use a transparent image as the source. A 1px x 1px transparent gif or png would do the trick.
Related
I created a landing page for the website www.foscaintepidario.it
But I want the image on it to be centered, and remain centered, also when the browser-view is changed. Changed in the perspective of size, but also the switch from landscape to portrait and the other way around.
In het HTML/CSS I currently make a distinction between the portrait and landscape version, they both have their own image.
Hope you can help me.
you can use css background elements to have a clean view.
background-image: url(url to image);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
I finally solved it. The solution with the background-image works fine. The only thing I had to add was the height: 100vh parameter!
Thnx for your support
I am not very experienced with image sprites so here is the question..
I made an image sprite on the web; this is the code:
.sprite-slidebutton {
background-position: 0 0;
width: 70px;
height: 63px;
}
.sprite-slidecross {
background-position: 0 -113px;
width: 70px;
height: 63px;
}
The image I got, I downloaded to my page and I called the .png wherever wanted it. It does appear! And the sprite is working, the image is switching like i want it to..
But the PNG is not showing a transparent background :S also the image is not in the middle, I only see half of the both images.. where and how to adjust?
To see it live:
solved
If i had to guess i would say there is a problem with the alpha values in the image. Download gimp and see what they are.
the png probably has a white background, instead of a transparent background. that's something you will need to edit in photoshop, gimp or similar.
as far as only seeing half the image it might be due to the element you are assigning the class to. if its an inline element like <a> or <span>. try adding "display:block;" inside the sprite-slidebutton class.
I'm quite new to CSS and web programming. What I'm trying to do is add a hovering effect for a button. I'm doing this by using 2 images.
There is a button called download and in hover code I add:
.button:hover{
background-image:url(images/button2.png);
}
The problem is the button takes time to load ie: on hover there is a delay to show the button. How can i solve this?
EDIT: I tried using preloading,but there is also a kind of delay
div#preloadedImages
{
width: 0px;
height: 0px;
background-image: url(images/button2.png);
}
You should use an image sprite to get rid of the delay. A sprite is one larger file that contains multiple images. Your button will have it's background set to sprite.png file. You can then change the background-position property to shift the positioning of your sprite.
On the other note - why do you use images for buttons? Most buttons can be done in pure CSS with some fallbacks for older browsers.
Create a single image out of the two images (which is called a sprite)
Here is a working example with an animation as well to show you how it works.
Click here >>> FIDDLE
Then set your background position to to show the normal state of the background image
.button {
width: 150px;
height: 50px;
background-image: url('image-sprite.jpg');
background-position: left top;
}
Then on your hover css, just move the background image to show the lower part of it
.button:hover {
background-position: left bottom;
}
Keep your current css and other stuff as they are and add an <img> component at anywhere of your page and make it hidden to load the image initially.
<img src="images/button2.png" style="display:none;"/>
I've got two big css image hovers... and I want the images to be max-width:100% (for phones). I can make the divs max-width 100% but then the image inside them just logically gets cut off by the div edge. How can I make sure that the image (in this case a background-image) in the div also does the 100% max-width?
Demo: http://www.buzz-creative.nl/_test/index.html
Thanks in advance!
http://jsfiddle.net/ZuX4p/
This uses background-size: 100% to make the background image fill the div, the only problem with this is you have to specify height and width, as there is no content in the div so it wants to be 0px by 0px
try, background-size:auto;
link http://www.css3.info/preview/background-size/
i have a bug i'm trying to narrow down and it's proving to be a doozie. i'm making a modal overlay and in IE8 for some reason i am able to click "through", focus inputs and select text underneath it.
in IE9, FF, Chrome everything works as expected. unfortunately a reduced testcase i slapped together (shown below) works just fine in IE8. has anyone run into this bug before? hoping to save some time. thanks!
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: pink;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
</style>
</head>
<body>
<input type="text" />
<div></div>
</body>
</html>
The problem is indeed that IE allows clicks to bleed through when the background of a div is transparent. For me, this works everywhere:
Just use a base64 encode of a 1x1 pixel transparent GIF as background, this stops all the clicks / taps (also tested on IE9 and IE8). Plus, this is pure CSS, no extra images needed.
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
The root cause of this issue is that IE does not consider semi-opaque backgrounds to be valid click targets, and so clicks are passed through to the element underneath.
For IE, you must have a solid color background or a background image to have an element capture clicks. As you've discovered, filters will not work.
The common thing to do is to use a 1x1 transparent GIF as the background-image for IE. The element will then capture clicks appropriately.
figured it out, i was using rgba() rather than opacity because i needed only the background to have transparency.
for IE it generated gradient filter using -ms-filter which was causing the issue. ended up just using
background: url(/images/EBEBEBB3.png);
background: rgba(255,255,255,.7);