I want the style to apply on the "a" elements, and not the img.
Here's an example:
a:hover {background: #555;}
I tried to do something like this:
a:hover img {background: none;}
though I knew it's not going to do anything.
The solution I found in this question didn't work for me, because the "display: none" is moving the image when hovering.
The img is inside the anchor, so wouldn't the background be outside the image no matter the background in the image element. Does the image have padding, margin or transparency?
I'm not sure what you're asking here.
If you put a background colour on an A tag that surrounds an image you'll never see the background because the image covers it up.
If you want to display the background colour and hide image when you mouse-over you can do it like this (insert your own image dimensions, filename etc.):
a {
display:block;
height:100px;
width:100px;
background-image:url(Images/sample.gif);
background-color:#555
}
a:hover {
background-image:none;
}
a:hover img { background:none }
means that when someone hovers over the A your IMG is in, the IMG background will be set to none--which means it will show your A's background, since it contains the IMG. (IMG is clear, A has background, but IMG is within or 'on top of' A; therefore, we see A's background). If your image is transparent in parts, A's background will show through.
The best solution may be
a {background:#555;}
/* set image to the background color of the layer you want to get back to */
a:hover img { background:#fff; }
The background isn't inherited by the image inside the link. Removing the background from the image doesn't do anything as it doesn't have any to start with.
If you are trying to "punch a hole" in the background where the image is, that is not possible. You would have to put other elements inside the link to fill up the space that is not occupied by the image, and set the background on those elements instead.
Related
I will create page follow image but I can't.
this image is page that I created.
I coding .css file follow this code for orange border.
> p {background-color: #ff6138;
width: 1535px;
height: 200px
}
How to make user image display half between orange border and white background?
Try to use negative margin-top for avatar img tag, something like
img#avatar {
margin-top: -50px;
}
(50px value is just ballpark and you need to adjust it)
I am using a custom font from Fontastic to display icons like you see here:
The icons can only be one color plus transparency, in this case the green you see above.
I want, in some circumstances, to display the 'details' of these icons as white - the way I would like to accomplish this is by placing a white background behind the appropriate part of the icon. The desired end-result:
I have tried adding a background color and using 50% border-radius but I get results like this:
and this (got close using display: inline-block on my icon element):
I feel I am having difficulty because the icon element itself is rectangular and centering the circular background behind the icon seems not possible using the knowledge I have of CSS.
I put up a demo of the icons here (sorry it's not at a 'css fiddle-like' website but I was having difficulty setting that up to match my situation): https://hoplu.com/troubleshooting
Any tips? I feel there is probably a css property I'm not aware of that makes this job much easier, but have been unable to pinpoint one.
What I would do is something like this:
hoplu {
position:relative;
}
hoplu:before {
position:relative;
z-index:2;
}
hoplu:after {
content:"";
position:absolute;
z-index:1;
border-radius:50%;
background:white;
left:0;
top:0;
width:75px;
height:75px;
}
This way you're using the :after pseudo-element to generate the white background, and since it has a lower z-index then the :before element (which contains the icon), it will be displayed behind the icon. Change the top, left, width or height of the :after element if needed.
I am designing a website where its whole background color is light green (#F5FFF6 to be exact), and now I need to create a fieldset who's background color is white (#FFFFFFF). My CSS markup is below:
#page_content {
width: 100%;
height: auto;
min-height: 100%;
position: relative;
background-color: #F5FFF6;
}
#fieldset {
background-color: #FFFFFF;
}
It kinda worked on the "light-green page background color" and my fieldset's color is white which what I wanted too. But I noticed that the area where my fieldset is positioned, the background color of the page was white too instead of that light-green. The rest were all light-green except to that area. So I tried creating another fieldset and boom! The same thing happened to the first fieldset - the area behind my fieldset was white again.
I do not understand the exact problem. If you don`t want the whole width of the page to be white just give the fieldset a width and so the background color of the page will remain green.
#fieldset {
background-color: #FFFFFF;
width: 100px;
height: 150px;
}
i made an example:
http://jsfiddle.net/aKGmc/2/
if this does not help you please upload a jsfiddle with it so i can take a look at the problem
Ids (selectors prefixed with a #) should be unique to one single element.
If you want to target more than one element of a category, use a class and the appropriate selector (<div class="something"> and .something {}) or a generic selector (div {}).
That behavior is normal.
You chose to apply the white background to an element (Fieldset) and you got the white background relative to that area. So if that is not ok, you probably want to achieve something else.
I want to set an image as a background of a heading, but only in the empty area. I do not want to display any background where the heading text is.
So, I have following HTML for heading:
<h2><span>Some text</span></h2>
h2{
background: url("image.png");
}
The problem is that, I do not want to display this heading background in the span, instead I want the span to adapt the background image of the page (parent element). I can not set a specific specific background for the span because it won't match with the page background. So how can I solve this?
You need to coordinate the background position of the image with the text. I'm not sure what your exact layout is, so adjust your values accordingly.
CSS alone cannot detect where your text is, or how bit it is. You need to use JavaScript to do that.
h2 {
background: url(image.png);
background-repeat:no-repeat;
background-position:5px 5px;
padding-left:30px;
}
You can use psuedo element to achieve this,
h1:before
{
content:url(your_img.jpg);
}
I am not going to paste the code as I hope that is not so important here.
an image is placed against a colored background (background made colored by background-color property ). surprisingly blue border is shown around the image.
What is the secret? how can i remove the border?
tnx beforehand.
Istiaque Ahmed
Bangladesh
Is the image inside a link (<a>)? That tends to put a blue border around the image. You can remove it by setting a border: 0 on the image (or some class the image is in).
Let me guess, the image is inside an a tag?
A border shows up for an image that is a link unless you explicitly remove the border.
You can remove the border with css:
img {
border: none;
}