I have a span tag that I'm adding a background image to. I know there are many ways of doing this but wondered if there is a way to make the background image which is a small pdf icon move to the right of the text instead of the left of it.
<span class='pdf'>download pdf link</span>
.pdf{
background: url(img/sprite.png) no-repeat left bottom;
display:inline-block;
padding-top:10px;
padding-left:26px;
There are a few more sprites in the sprite image and this one is set to be position to the bottom.
How about changing left to right?
background: url(img/sprite.png) no-repeat right bottom;
padding-right:26px;
There are two ways by which you can position the background image.
by left/right attributes
For example:
background: url(img/sprite.png) no-repeat right bottom;
// "right" instead of "left"
See the Demo: http://jsfiddle.net/rathoreahsan/sDajV/5/
or
by percentage attributes
For example:
background: url(img/sprite.png) no-repeat 188% 93%;
See the Demo: http://jsfiddle.net/rathoreahsan/sDajV/4/
Related
i need to add an small image to the left and right from a hyperlink. This will be reused several times with different images, so I need to do it in CSS with classes.
I succeeded already to either the left http://jsfiddle.net/XAh2d/9257/
.fuss {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) center left no-repeat; padding-left: 20px;}
or to the right http://jsfiddle.net/k59zhwg3/1/
.fuss {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) center right no-repeat; padding-right: 20px;}
but as soon i try to use two classes for left AND right, it didnt work, only one image shows up: http://jsfiddle.net/7jcqxa3v/10/
.fuss-rechts {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) right no-repeat; padding-right: 20px;}
.fuss-links {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) left no-repeat; padding-left: 20px;}
in HTML: <a class="fuss-links fuss-rechts" target="_blank" href="https://elternwerkstatt.domaincontrol.at">hier mein link</a>
Any help appreciated! Thank you
You can modify your CSS class like this to achieve it:
.fuss {
background: transparent;
background-image: url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png), url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png);
background-position:left,right;
background-repeat: no-repeat, no-repeat;
padding-left:20px;
padding-right:20px;
}
Yes, this is expected behavior. The CSS class fuss-links is overwriting the background rule set by fuss-rechts since it comes 2nd in the stylesheet, since CSS rulesets prioritize rules that come last (hence the C for cascading in CSS).
To my knowledge, you cannot achieve the desired effect using just the CSS background rule, since it does not allow you to repeat elements only on the edges, you can either never repeat or repeat across the entire width (source: https://css-tricks.com/almanac/properties/b/background-repeat/).
My suggestion would be to move the images to <img> tags inside the <a> tag and to use position: absolute; to achieve the effect you want. You can see any example here:
https://jsfiddle.net/7jcqxa3v/22/
I have a form with a a select box that has a custom drop down arrow, put in place with the background property in my CSS. Right now it's positioned to the right, but that means it butts up right against the side of my box - is there some way I get get the arrow to "see" the padding to the right of it?
CSS:
select {
background: url(images/contact/downarrow.svg) no-repeat right #f3f3f3;
}
RESULT:
Or you can try to use a <img src="images/contact/downarrow.svg" />
with float: right;
And it will be nicely positioned to the right and will follow the Padding rules at your Tab area.
Good luck.
For others:
if you use something like
background: url(images/contact/downarrow.svg) no-repeat 250px #f3f3f3;
that's going to (sensibly) just stick it 250px over, and when you resize the window it'll eventually be covered over by the shrinking screen size. To prevent this, replace those pixel values with percentages. Eg:
background: url(images/contact/downarrow.svg) no-repeat 96% #f3f3f3;
I am trying to make the background image be positioned to the bottom left of a div and cover the entire div, without distorting it's ratio.
Whenever I use
background:url("img.jpg") no-repeat left bottom fixed;
it goes to the left of the body and the bottom of the body, not the div. How do I get it to use the div as the frame of reference and not the body?
Fiddle below
http://jsfiddle.net/UFpYd/3/
How about this:
background: url('img.jpg') no-repeat scroll center top/cover transparent;
EDIT:-
After watching your JSFiddle you may try this:
background: url('img.jpg') no-repeat left bottom;
JSFIDDLE
Not sure if you are looking for this:
background: url('img.jpg') no-repeat left bottom;
or this:
background: url('img.jpg') no-repeat left bottom fixed;
Clarification: Your fiddle you posted uses center top for background image positioning. It should work as you expect if you use left bottom (whether fixed or not will depend on how you want your image positioned).
I have this image which I want to use over div of ANY color to give a glossy look. What should I do? should I use it as a background or add it on other div and put it on previous one?
Thanks
.your_div {
background: #f39 url(http://i50.tinypic.com/2m2b9td.png) no-repeat left bottom;
}
How do you align an image or background image to the bottom right of this fluid hero box example in twitter bootstrap?
write like this:
div{
background-position:bottom right;
}
You can use the bootstrap .pull-right class with some top margin to push an image to the bottom right, or define your background-position to the bottom right as the other posted suggested.
<img class="pull-right" style="margin-top:10px;" src="http://lorempixel.com/400/200">
You can arrange background image to left bottom by using the following CSS
div{
background-image: url('/Holding.png');
background-repeat: no-repeat;
background-position: left bottom;
}
For reference you can check here.