I have an icon set as background, as shown below:
As you can see there must be padding right after the arrow to have nice space.
How can I solve this issue?
HTML
<span class="arrowIcon">Newsletter Sign up</span>
CSS
.arrowIcon{
background-image:url(../img/arrow.png);
background-position:right center;
background-repeat:no-repeat;
background-color:#5379A5;
padding:10px;
color:#FFFFFF;
float:right;
width:55%;
}
You can position a background image FROM the right by writing this in your css.
background-position: right 10px center;
I consider this to be the cleanest solutions.
You can do it with calc.
#test {
background-color: moccasin;
width: 500px;
height: 100px;
background-image: url('http://www.math.muni.cz/~bulik/gifs/arrow.small.left.gif');
background-position: calc(100% - 10px) center;
background-repeat: no-repeat;
}
<div id="test">
</div>
You can add a right border with the same color as the background :
border-right: 10px solid #5379A5;
A background image does not take padding into account, use background-position for that or split up your <span> into <span>newsletter sign up<img></img></span> .
Here it is :
.arrowIcon {
background-image: url(http://www.clker.com/cliparts/7/6/4/a/1206569902228245216pitr_green_single_arrows_set_1.svg.hi.png);
background-position: 95% center;
/* adjust the 98% as your needs or put px value instead if you know extact div size */
background-repeat: no-repeat;
background-color: #5379A5;
background-size: 1em;
padding: 10px;
color: #FFFFFF;
float: right;
width: 55%;
/* to display correctly in SO */
position: absolute;
top: 25%;
right: 0px;
}
<span class="arrowIcon">Newsletter Sign up</span>
Since, you have given float:right its going to be in right .
Related
my code in css is:
.logo{
content:url(http://www.dylionsrugby.com.au/wp-content/uploads/2012/04/lion.png/600x600);
background-color: White;
float: right;
}
and in html I have:
<div class="logo"></div>
Am I missing something, nothing appears?`
Your question is somewhat general. You could also simulate the right positioning using positioning property on the image and not on the div.
.logo{
width: 250px;
height: 75px;
background-image: url("http://www.slate.com/content/dam/slate/articles/health_and_science/science/2015/07/150730_SCI_Cecil_lion.jpg.CROP.promo-xlarge2.jpg");
background-color: white;
background-repeat: no-repeat;
background-size: 100% 100%;
float: right;
}
<div class="logo"></div>
First of all, the "content" property is used for :before and :after pseudo-elements. Second, the link to the image is incorrect. I assume that you want the picture inside the div .logo with a white background so here is a jsfiddle: https://jsfiddle.net/Iulius90/njne5sy5/
code:
.logo {
background: white url(http://www.dylionsrugby.com.au/wp-content/uploads/2012/04/lion.png) no-repeat center;
background-size: cover;
float: right;
width: 200px;
height: 200px;
}
I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.
How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>
Change the CSS for your #bod selector to the following:
#bod {
border-radius: 105px 105px 0px 0px;
border: 5px ridge blue;
height: 300px;
width: 300px;
float: right;
overflow: hidden;
background-image: url("smile.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Just to be clear, I've removed the background-attachment attribute from the style definition and changed the value of the background-size attribute to cover, which is the important part.
Update
You've previously set the image through your CSS by setting the background-image to url("smile.jpg") in the #bod styling. I'm guessing that line isn't needed anymore since you're now setting the image in your HTML with: <img src="http://lorempixel.com/800/500" /> instead.
That image is now off-center, to fix that change your #pic styling to the following:
#pic {
float: right;
transform: rotate(90deg);
transform-origin: 50% 50%;
height: 100%;
width: 100%;
}
I've added the transform-origin, width and height attributes to the #pic styling.
The center of rotation is middle of div, so you have to make sure that the center is in the right place. You should just do this:
#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}
https://jsfiddle.net/ebc5yjzu/3/
Demo
.moving_background
{
background-image: url("../image/quote3.jpg");
background-position: 50% center; /*Centering property*/
background-repeat: no-repeat;
height: 100px;
margin: 20px;
width: 100px;
border:1px solid;
}
If i change the width and height to 100%, it is not showing the border to me. I don't understand the reason. Please let me know this
I am trying to center this div in the body. Any other ways are also welcome except negative top, left, margin values.
Any idea?
The issue is that background-image does not count as content in your div, so what you have is an empty div, hence it has no height. A way around this is to add the image inside the div, then hide it.
HTML
<div class="moving_background">
<image src="http://placehold.it/100x100" class="background"/>
</div>
CSS
.moving_background {
background-image: url("http://placehold.it/100x100");
background-position: 50% center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
margin: 20px;
width: 100%;
border:1px solid;
}
.background {
visibility: hidden
}
JSFiddle: http://jsfiddle.net/nhg33xek/4/
Sorry if the layout of the question seems weird, I've wrote this question now for about 10 times over and over again in this editor, resulting always in getting an error message "unformatted code found etc." - so I removed all the code and placed picture examples. (2 hours for a simple question)
Hello folks!
I do have a .png image, containing several icons that works as CSS Sprite.
The creation of each CSS class for that is no problem as I use a generator for that. (works like a charm)
The problem is, that I want to use, for example: The created .iconInfo_32 class, as background property for another css class.
What I want to achive?
Simple said, a custom css - messagebox, with an icon on the left side.
The icon itself is in original a sprite containing multiple icons.
That's where the problem starts.
What I have
The Icons
(thats one PNG)
The Icon I want to use
How the result should look like
How it actually looks
Use another div, in a div
Yes, that would work - but I'd like to have "one" css class, without the need to put always a div, into another div, say where the position should be and so on - also I had problems with the position of the div.
I've provided a source example, hopefully this will help being able to understand my question and my goal.
Excuse me if the layout of my question is unusual and unpleasent, I would have done it in another way, but the editor just won't let me
Source
HTML
<div class="warning_without_sprite">
This is a DIV container<br />
showing an error message with the use of 'close_32.png' as Icon. (No Sprite)
</div><br /><br /><br /><br />
<div class="warning_with_sprite">
This is a DIV container<br />
showing an error message with the use of 'icons.png' as Icon. (Sprite)
</div>
CSS
<style type="text/css">
.iconInfo_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -0px -0px; }
.iconOk_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -32px -0px; }
.iconAdd_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -64px -0px; }
.iconClose_2_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -96px -0px; }
.iconClose_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -128px -0px; }
.iconDelete_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -160px -0px; }
.iconDownload_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -192px -0px; }
.iconHelp_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -224px -0px; }
.warning_without_sprite {
border: 1px solid;
padding: 10px 10px 10px 50px;
background-repeat: no-repeat;
background-position: 10px center;
float:left;
color: #D8000C;
background-color: #FFBABA;
background-image: url('images/close_32.png');
}
.warning_with_sprite {
border: 1px solid;
padding: 10px 10px 10px 50px;
background-repeat: no-repeat;
background-position: 10px center;
float:left;
color: #D8000C;
background: #FFBABA url('images/icons.png') no-repeat -128px -0px;
}
</style>
>> Download as RAR. <<
It's because you've set it as a background-image across the whole <div> element and because the sprite contains multiple images it will show them all. You can't specify how much of that sprite to show.
You'll have to insert a <span> element into your <div>. This will allow you to specify the size of the span and position it relative to your div container.
<div class="warning">
<span class="warning_with_sprite"></span>
This is a DIV container<br />
showing an error message with the use of 'icons.png' as Icon. (Sprite)
</div>
CSS:
.warning_with_sprite {
position:absolute; left:16px; top:16px;
background-repeat: no-repeat;
background-position: 10px center;
width:20px; height:20px;
background: url('http://i5.minus.com/id1CYq.png') no-repeat -133px -2px;
}
.warning {
float:left;
color: #D8000C;
border: 1px solid;
position:relative;
padding: 10px 10px 10px 50px;
background: #FFBABA;
}
See a demo here
Note: you'll have to change the image back to your sprite and the top, left, height and width properties will have to change inline with your requirements
There is example in JsFiddle .
Small description: Div is 300x300 but might be 500x500 or 100x100 in future (so need flexible solution) with background image (which is size:cover so don't care about size).
Inside this div there is <p> with hight of 50px (but might be 100px or 25px in future) which has text inside (20) and background-color that is a bit transparent (blue).
I want to center it inside this div and sollution should be flexible (so for future changes it won't be take a few hours to fix all images/ideas manually, so it would be cool to use % values.
Has anyone an idea?
One way:
.cover-price{
height: 300px;
width: 300px;
background-repeat: no-repeat;
background-size: cover;
position:relative; /*Make container relative*/
}
.cover-price p{
line-height: 50px;
width: 100%;
height: 50px;
background-color: rgba(43,32,122, .3);
color: pink;
position:absolute; /*make P absolute*/
top: calc(50% - 50px); /*give top as 50% - height of p*/
}
Fiddle
Using calc since you have specified css3 in tags
If not using calc for lack of support below IE9 the you can specify the top value as height of the container/2-height of para i.e here top: 100px;
You should be able to just add display:table-cell; vertical-align:middle; to your cover price class.
Have you tried Span and normal padding??
<p><span class="price">20.0 </span></p>
.cover-price p{
line-height: 50px;
width: 100%;
height: 50px;
/*background-color: rgba(43,32,122, .3);*/
color: pink;
padding-top : 45%;
position: relative;
}
.price{
background-color: rgba(43,32,122, .3);
}
http://jsfiddle.net/BZGhU/13/
.cover-price{
height: 300px;
width: 300px;
background-repeat: no-repeat;
background-size: cover;
display:table-cell; vertical-align:middle;
}