Issue with CSS background image (Image not Showing) - html

I am having a problem with a background image not showing.
I have a class that I've added to an anchor tag.
<a class="my-class"></a>
and the css for the class is:
.my-class {
background:transparent url("../images/my-bg-image.png") no-repeat 0 center
}
The problem is that the background image is not showing.
I know it's there because when I do this:
<a class="my-class">&NBSP;</a>
part of the image shows.
Anyone have any idea on how to make the whole image show without having to insert lots of 's please?

<a> tag is an inline element and without a content will not show the background, so You need to make it display as a block or inline-block element and then define the size of the element.
Try with:
.my-class {
display: block;
width: 128px;
height: 128px;
background: transparent url("../images/my-bg-image.png") no-repeat 0 center
}
For more information you can check the box model and the display property on the CSS 2.1 w3c standard.
Also the sections The width property and Computing widths and margins have an explanation of why the element doesn't show the background on an empty inline element.
Update:
Also the working draft of the CSS Box Model is available on the W3C site.
Update 2:
On a side note, relying only on a css background image for a link can have somme accessibility issues.

The element has a zero-width because it has no content at all. If the image contains useful information (and it really should, it is used as a link!), you should put some text inside the link and use any image replacement technique you like, for example:
HTML:
<a class="my-class">It‘s awesome!</a>
CSS:
.my-class {
background:transparent url("../images/my-bg-image.png") no-repeat 0 center;
display: inline-block; /* create a block element behaving like an inline element */
text-indent: -1000em; /* move the inner text outside of the link */
overflow: hidden; /* prevent text visibility */
width: 200px; /* image width */
height: 16px; /* image height */
}

You need to assign a width to your anchor. Inline elements have no width if they have no content.
.my-class {
background:transparent url("../images/my-bg-image.png") no-repeat 0 center;
width:20px;
height:20px;
display:inline-block;
}
Edit: and it seems without any content at all it is also necessary to set a height and display:inline-block. This causes the element to think of itself internally as a block element, but act externally as inline.

Related

CSS Content element use :before img works weird

I'm trying to place three different images before some li points, but somehow, it just don't work the way I want. Can someone help me?
Right now, it looks like this: CSS content
As you can see, the images don't stay next to the text I want to, even though I used :before. The images are also very big, but I just want them just as small as the text.
This is the CSS code I've used:
a[href*="bron.pdf"]:before {
content: url("PDF%20img%20.gif");
}
a[href*="bron.vcf"]:before {
content: url("vcard-icon.png");
}
a[href*="bron.jpg"]:before {
content: url("adobe%20img%20.png");
}
This is the HTML code:
<section>
<h4>Downloads</h4>
<ul>
<li>project_CMDA_Moet_ik_rennen.pdf (1.3MB)</li>
<li>Contactgegevens_CMDA_Moet_ik_rennen.vcf</li>
<li>Poster_CMDA_Moet_ik_rennen.jpg (569KB)</li>
</ul>
</section>
What am I doing wrong?
A way to manage it will be to set a background-image in place of an image to be able to change height and width of the image. Also use display: inline-block to have the text and the image next to each other.
a:before {
content:"";
display:inline-block;
width: 20px;
height: 18px;
background-size: cover;
}
(Of course, adjust the height and the width depends of the size you want).
And then add the background-image property to each of your element
a[href*="bron.pdf"]:before {
background-image: url("PDF%20img%20.gif");
}
a[href*="bron.vcf"]:before {
background-image: url("vcard-icon.png");
}
a[href*="bron.jpg"]:before {
background-image: url("adobe%20img%20.png");
}
Here an exemple of a working exemple
You must set a height and width for them of how big you want them to be. Also try using: display:inline for the images and the text container (if it is a p tag or any tag) or if this doesn't work out, use float:left for the images.

Displaying a text area on top of an image

I've seen questions for putting an image in a text area, but I have a slightly different problem: I'd like to layer a textarea on top of an image. I've tried using the z-index style property but the image - which I fadeIn with jquery - always sits on top of the text area.
Here is another way of doing it which may be more versatile.
Create a block level container with two child elements, one for the image and one for the text area:
<div class="textpanel">
<img src="http://placekitten.com/300/300">
<textarea>some text area text...</textarea>
</div>
Apply the following CSS:
.textpanel {
position: relative;
}
.textpanel img {
display: block;
}
.textpanel textarea {
position: absolute;
top: 50px;
left: 50px;
height: 200px;
width: 200px;
background-color: rgba(255,255,255,0.5);
}
Set position: relative on the parent container and then use position: absolute to place the the textarea over the image.
You can use rgba to control the opacity of textarea or you can fade the image using your method of choice.
You can also try styling the border to the textarea as needed.
Demo fiddle: http://jsfiddle.net/audetwebdesign/ygMZ6/
How This Works
Setting position: relative on .textpanel simply sets a reference for any absolutely positioned child elements.
Setting position: absolute on textarea allows for vertical and horizontal positioning.
A new stacking order is created which is why the textarea appears overlying the image, which
is still in the root level stacking order.
In this case, no need to use z-index to alter the stacking order of any elements.
You could always use CSS:
textarea{
background:url('image.png');
}
or
textarea{
background-image:url('image.png');
}
I dont know why you would want to do that but here is my thought on this..
Set the background image of the text area then use simple javascript or jquery to implement background fading..
Here are some examples on background images for text areas..
http://www.angelfire.com/nm/thehtmlsource/jazzup/text/textareabgimage.html

Some doubts about how make an image clickable using CSS

I am studying on a tutorial how to create a tabless web template using HTML + CSS and I have a little doubt related to the following thing:
I have an header that contains a div having id=logo, something like this:
<div id="header"> <!-- HEADER -->
<div id="logo"> <!-- My Logo -->
<h1>My web site is cool</h1>
<p id="slogan">
My web site is finally online
</p>
</div>
......
OTHER HEADER STUFF
......
</div> <!-- Close header -->
And related to this #header div (and its content) I have the following CSS code:
/* For the image replacement of the logo */
h1 {
background: url(../images/logo.jpg) no-repeat;
text-indent: -9999px;
width: 224px;
height: 71px;
}
h1 a {
display: block;
width: 258px;
height: 64px;
text-decoration: none;
}
So this code put an image instead of the My web site is cool text that is in the tag.
I have some problem to understand the h1 a CSS settings, on the tutorial say that this CSS settings for h1 a:
Turns to block (from inline) the display mode of the link in the header, so I can set the width and height, and the image of the logo is now clickable
This thing is not very clear for me and I have the following doubts:
Have I to convert the a element (that is inline) into a block element to give it the same dimension of the underlying image (logo.jpg)?
Tnx
Andrea
Take this example,
an a element is inline by default, so if you were to do something like
CSS
a {background:red; height:210px; width:200px;}
HTML
test
You will notice that the width and height properties aren't working. Now for this element to be sized at that width, you need to set the element's display property to be either display:block or display:inline-block
JSFiddle Demo Example
HTML:
Without display:inline block, width and height set.
<br><br>
With display:inline block, width and height set.
<br><br>
With display:block, width and height set.
CSS:
a {background:#ccc; height:210px; width:200px;}
.inline-block { display:inline-block; }
.block { display:block; }
If you're linking an image, you don't need to give the a height/width or even a display:block. However, you really shouldn't be putting an image inside an h1 like that. You'd be better off making the a inside the h1 a block (using display:block) and setting the background to the image, then hiding the text. To the user of the site, there's not going to be much difference, but it removes images from your HTML code, makes it easier for screen readers, and is more semantically correct. So your code would be:
a { display: block; font-size:0; background-image:url("logo.png"); height:100; width:100 }

using images inside <button> element

I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using &nbsp works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}​
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.

Strange CSS issue - background attribute is not working without image height

I need to set the image height everytime I'm using background: url('images/something.jpg')[..];
Fe.
HTML:
<div class="someImage"></div>
CSS:
.someImage {
background: url('images/something.jpg') no-repeat top;
}
The above example should work... but image won't display until I add an image height attribute to the CSS style class:
.someImage {
background: url('images/something.jpg') no-repeat top;
height: 25px;
}
And then my image appear on the website...
Why does it happend?
Because without content, a div has no height, background image or not.
Since your div is empty it has no height..
The image you use is applied as a background, so it does not affect the size.. it just fits whatever space is available at the div.
When you explicitly set the height, you create room for the image to appear..