CSS style for attachments - icons before text automatically - html

I was wondering how hard it is to make a class for downloads that places an icon right before the text and both text and icon are part of the link to the attached file. Is there a simple way to do this with CSS?

Assuming that all links to downloads are a elements, of class-name 'downloadLink':
.downloadLink {
background-image: url(path/to/image.png);
background-position: 0 50%;
background-repeat: no-repeat;
}
If those links are of the format:
document.pdf
image.png
Then the css:
.downloadLink[href$=pdf] {
background-image: url(path/to/pdf_background_image.png);
background-position: 0 50%;
background-repeat: no-repeat;
}
.downloadLink[href$=png] {
background-image: url(path/to/png_background_image.png);
background-position: 0 50%;
background-repeat: no-repeat;
}
Will give specific backgrounds to links with a href attribute that ends with pdf or png. This approach is based around CSS3's attribute-selectors, which might reduce cross-browser compatibility but, according to Quirksmode's compatibility table not by much (basically everything above, and including, IE7 should support this (albeit it doesn't specify which of the selectors are supported) in IE or other browsers).
References:
attribute-ends-with $= selector.

Related

alt attribute missing in slider revolution's transparent image

<div class="tp-bgimg defaultimg " data-bgcolor="undefined" style="background-repeat: no-repeat;
background-image: url("https://ifycc.org/wp-content/plugins/revslider/admin/assets/images/transparent.png");
background-size: cover; background-position: center center; width: 100%; height: 100%;
opacity: 1; visibility: inherit; z-index: 20;" src="https://ifycc.org/wp-content/plugins/revslider/admin/assets/images/transparent.png">
</div>
I have this code added by the slider revolution. I know they used transparent.png as a background image but still, SEO analyzers are giving me the warning to add alt attributes to these images. I think it's because they've also added an src attribute. Can anyone please guide me to fix this problem.
You need to edit the slide and under main background source settings there is a Textbox to enter Alt texts.
Was facing the same problem. However, when I downloaded Rev Slider PNG image and uploaded it as normal bg (with repeat) it has solved the problem as I have given ALT in Media Library itself.

background-position is removed on page load

I have a HTML page that tries to display some icons from a sprite image.
I added the css file, and also put the sprite image in the current working directory. For reference, one of the icon has the definition like as shown below,
.locicon{
background-position: -61px -110px ;
width: 20px;
height: 20px;
background: url(htsprite1.png) no-repeat;
}
Problem: However, when the page is loaded, the icons are not getting displayed.
When inspecting on chrome and firefox, I can see the sprite image, and this is the runtime definition of the class locicon :
.locicon{
width: 20px;
height: 20px;
background: url(htsprite1.png) no-repeat;
}
Everything except the background-position. Why is it happening like this?
I checked if this property is overriden somewhere and couldn't find any such instance while inspecting on the element.
Note: Before posting here, I even tried with a plain HTML file , including the css file, and tested, still the same issue .
background-position is getting removed at runtime!
Note: The Sprite wont appear in my case even after resolving this because of this linked issue, which is rectified now : Just for reference: CSS sprite not appearing in Firefox, but displaying in Chrome
You background-position is overwritten by background. Try to set the background-positionafterwards:
background: url(htsprite1.png) no-repeat;
background-position: -61px -110px;
A cleaner solution would be to set the background properties separately:
background-image: url(htsprite1.png);
background-repeat: no-repeat;
background-position: -61px -110px;

How to add a border-bottom-image with css

I created the following image to be rendered under all h1 title tags in my website. Trouble is, every tutorial I find online discusses border image property as a all around border.
All I want to achieve is to get this one small image underneath the title, once. No repeat. centered. According to this http://www.css3.info/preview/border-image/ there is a property called border-bottom-image. But I can't seem to get it to display properly.
Google chrome developer tools tells me that this is an unknown property name. If I can't achieve this with the following css3, how can I achieve it?
.entry-title{
border-bottom-image: url(images/title-borderbottom.jpg);
}
Here are two options that allow you to do what you want without resorting to border-image, which is not really built for what you want to do.
background-image + :after
This uses a pseudo-element (:after) to "insert" a block with your given image as the background-image. I think this is probably better than the next option, since it's least disruptive to the element's styling.
.entry-title:after {
content: "";
display: block;
height: 70px;
background-image: url(http://placehold.it/350x65);
background-repeat: no-repeat;
background-position: center bottom;
}
http://jsfiddle.net/mh66rvbo/2/
background-image + padding
This uses padding-bottom to make space for the image, then sticks the image along the bottom of the element, positioning in the center.
.entry-title {
padding-bottom: 70px;
background-image: url(http://placehold.it/350x65);
background-repeat: no-repeat;
background-position: center bottom;
}
http://jsfiddle.net/mh66rvbo/1/
work for me ....
.entry-title{
border-bottom: 20px solid #000;
border-image:url('bottom.jpeg');
border-image-repeat: round;
border-image-slice: 300;
text-align: center;
margin: 0px auto;
width:70%;
}
From the link you provided (http://www.css3.info/preview/border-image/)
border-image currently works in Safari and Firefox 3.1 (Alpha).
Per my understanding, "border-bottom-image" still doesn't work in the latest version of Google Chrome (natively). But "border-image" does. And you can define width for each individual portion using the (top right bottom left) protocol:
.entry-title{
border-image: url(images/title-borderbottom.jpg);
border-image-width: 0 0 10px 0;
border-image-repeat: stretch;
}
Details: http://www.w3schools.com/cssref/css3_pr_border-image.asp

Background image is not showing in IE and works fine with other browsers

Background image is not showing in IE and works fine with other browsers.
My line of code in CSS:
background: url(../images/box.png)no-repeat;
Add a space between image src and no-repeat.
url(../images/box.png) no-repeat
You should review background's shorthand implementation:
background: (color) url(../images/box.png) no-repeat (position-x) (position-y);
^^^^^
there needs to be
a space here too
I'd recommend moving to individual declaration if you aren't going to specify everything in the shorthand form of background, i.e.:
background-image: url(../images/box.png);
background-repeat: no-repeat;

background-position-y doesn't work in Firefox (via CSS)?

In my code the background-position-y doesn't work. In Chrome it's ok, but not working in Firefox.
Anyone have any solution?
If your position-x is 0, there's no other solution than writing :
background-position: 0 100px;
background-position-x is a non-standard implementation coming from IE. Chrome did copy it, but sadly not firefox...
However this solution may not be perfect if you have separate sprites on a big background, with rows and cols meaning different things... (for example different logos on each row, selected/hovered on right, plain on left)
In that case, I'd suggest to separate the big picture in separate images, or write the different combinations in the CSS... Depending on the number of sprites, one or the other could be the best choice.
Use this
background: url("path-to-url.png") 89px 78px no-repeat;
Instead of this
background-image: url("path");
background-position-x: 89px;
background-position-y: 78px;
background-repeat: no-repeat;
Firefox 49 will be released—with support for background-position-[xy]—in September 2016. For older versions up to 31, you can use CSS variables to achieve positioning the background on a single axis similar to using background-position-x or background-position-y. CSS variables reached Candidate Recommendation status in December 2015.
The following is a fully cross-browser example of modifying background position axes for sprite images on hover:
:root {
--bgX: 0px;
--bgY: 0px;
}
a {
background-position: 0px 0px;
background-position: var(--bgX) var(--bgY);
}
a:hover, a:focus { background-position-x: -54px; --bgX: -54px; }
a:active { background-position-x: -108px; --bgX: -108px; }
a.facebook { background-position-y: -20px; --bgY: -20px; }
a.gplus { background-position-y: -40px; --bgY: -40px; }
background-position-y :10px; is not working in Firefox web browser.
You should follow this type of syntax:
background-position: 10px 15px;
10px is bounded to "position-x" and 15px bounded to "position-y"
100% working Solution
Follow this URL for more examples
Why don't you use background-position directly?
Use:
background-position : 40% 56%;
Instead Of:
background-position-x : 40%;
background-position-y : 56%
background: url("path") 89px 78px no-repeat;
Will not work if you want a background along with the image. So use:
background: orange url("path-to-image.png") 89px 78px no-repeat;
This worked for me:
a {
background-image: url(/image.jpg);
width: 228px;
height: 78px;
display: inline-block;
}
a:hover {
background-position: 0 -78px;
background-repeat: no-repeat;
}
Make certain you explicitly state the measurement of your offset. I came across this exact issue today, and it was due to how browsers interpret the values you provide in your CSS.
For example, this works perfectly in Chrome:
background: url("my-image.png") 100 100 no-repeat;
But, for Firefox and IE, you need to write:
background: url("my-image.png") 100px 100px no-repeat;
Hope this helps.
However this solution may not be perfect if you have separate sprites on a big background, with rows and cols meaning different things... (for example different logos on each row, selected/hovered on right, plain on left) In that case, I'd suggest to separate the big picture in separate images, or write the different combinations in the CSS... Depending on the number of sprites, one or the other could be the best choice.
Mine has the exact problem as stated by Orabîg which has a table like sprite which has columns and rows.
Below is what I used as a workaround using js
firefoxFixBackgroundposition:function(){
$('.circle').on({
mouseenter: function(){
$(this).css('background-position',$(this).css('background-position').split(' ')[0]+' -10px');
},
mouseleave: function(){
$(this).css('background-position',$(this).css('background-position').split(' ')[0]+' 0');
}
});
}