I add a simple decorative svg in my div:
.advantages {
color: #B3B3B3;
padding-top: 6px;
padding-bottom: 21px;
background: url(../svg/curvy-bg.svg) center bottom repeat-x, #FBFBFB;
background-size: 32%;
}
The problem is that the svg shows separate white space between the repeat-x...
Check the problem here
If you resize the screen in the jsfiddle you can see how the curvy background changes it's white space.
I don´t want the white spaces.
What´s the problem?
Edit background in your code
.advantages {
color: #B3B3B3;
padding-top: 6px;
padding-bottom: 21px;
background: #f5f5f5 url(http://imgh.us/curvy-bg2.svg) repeat-x center bottom;
background-size: 32%;
}
https://jsfiddle.net/q3geyevk/5/
Related
I'm working on my code to set up the border for the background image when I hover on the image. I have got a problem with the image that get too close to the border when I hover on the image. I want to move the image to the center just like this:
https://i.imgur.com/9et5LIL.png
Here is the jsfiddle: https://jsfiddle.net/05xq2b3m/
I have tried each of these:
padding-left: 4px;
background-position: center center;
background-position: 2px;
margin-left: 2px;
It wont do anything as the background image will stay close to the border when I hover on the image. I have tried to find the answers on google but I am unable to find the solution.
Here is the full code:
.a8r {
margin-top: 12px;
margin-left: 11px;
height: 28px;
width: 28px;
border: none;
display: inline-block;
}
.e1f600 {
background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -11223px;
}
.e1f600:hover {
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: 0 0 3px 2px rgba(0, 0, 0, .15);
width: 32px;
height: 30px;
background-position: center center;
}
<button aria-label="grinning face" string="1f600" class="e1f600 a8r">
What I am expecting to achieve is I want to set the background image to be in the center that is not too close to the border when I hover on the image.
Can you please show me an example how I can set the background image that don't get too close to the border when I hover on the image?
Thank you.
Change the background position
Give your element a background color
Set the size of your element in not hover style
See it in seperate lines. You will understand it more this way. Feel free to optimize or minimize it.
.e1f600 {
background-image: url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png);
background-position: center -11222px;
background-repeat: no-repeat;
background-color: transparent;
width: 32px;
height: 32px;
}
.e1f600:hover {
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: 0 0 3px 2px rgba(0,0,0,.15);
}
I dont know why this is not working. I have already had a look and can't find any solution.
See it LIVE HERE.
The two input boxes in the banner have background images attached but they are not showing.
Change background: transparent; to background-color: transparent;.
Explaination:
.jobs-inp {
background-image: url(images/magnify-icon.png);
background-repeat: no-repeat;
background-position: 0 0;
padding-left: 15px;
background: transparent;
font-size: 18px;
font-family: Interstate-Regular;
color: white;
border: 1px solid white;
height: 40px;
width: 25%;
}
background: transparent; overrides all background properties before, because background is a shorthand for all properties.
I have the following webpage: http://jsfiddle.net/Leytgm3L/16/
and as you can see, I have the CSS code describing button:
.learn-btn, .download-btn {
display: inline-block;
padding: 18px 46px;
border: 2px solid #fff;
border-radius: 3px;
color: #fff;
font-size: 16px;
}
Thanks to this - it's transparent. I want it to have the same background as the div above:
#black{
background: url('http://www.geeknaut.com/images/windows-wallpapers/Cool-Windows-7-Wallpapers.jpg') no-repeat center center fixed;
background-size: cover;
}
and not the background of my webpage:
.hero4{
background:url('http://i.imgur.com/D2ATnw8.jpg') no-repeat center center;
}
How can I make it, so the button not only has the background of the div above, but also this background is fixed and covered?
I added the image to the back ground of your button http://jsfiddle.net/Leytgm3L/17/ like this:
#black{
background: url('http://www.geeknaut.com/images/windows-wallpapers/Cool-Windows-7-Wallpapers.jpg') no-repeat center center fixed;
background-size: cover;
}
guys. I style little form with submit button.
It looks like:
As you can see there is some white background around submit image and I don't have idea why! Image is cut fine and I always cut image with transparent background.
my HTML:
<form action="#">
<textarea rows="4" cols="50"> </textarea>
<input type="submit" class="join-us" value="PŘIDEJ SE K NÁM">
</form>
CSS:
.join-us{
background-image: url("images/join_us.png");
background-repeat: no-repeat;
width:181px;
height: 114px;
line-height: 114px;
color: #f7f7f7;
vertical-align: top;
margin-top: 10px;
margin-left: 10px;
cursor:pointer;
white-space: nowarp;
}
Live website can be find on http://funedit.com/andurit/new
Can you help me to remove that white backgroun from there?
It's not a white background, it's the input element's border. Just remove it using CSS by adding the following rule to the .join-us class:
border: none;
It seems that you also need to adjust the height of the button to 106px, so your final class definition will look like this:
.join-us{
background-image: url("images/join_us.png");
background-repeat: no-repeat;
width:181px;
height: 106px;
line-height: 106px;
color: #f7f7f7;
vertical-align: top;
margin-top: 10px;
margin-left: 10px;
cursor:pointer;
white-space: nowrap;
border: none;
}
Setting
border: none;
is an important part to remove the standard <button>-style. However, in your case it is not quite enough: You also have to set
height: 106px;
Since your image is only that high.
It's not a Background of input.
You can easily remove this white border, by setting the CSS property border:none;,
And the bottom white background is due to your Image. It's because your image have some transparent area at the bottom.
If you want to remove it, you can try to set height: 106px; into CSS class .join-us.
After doing this your Input look like this : -
As buttons have there default border style, you need to overwrite that:
border:none;
so ur css should be:
.join-us{
background-image: url("images/join_us.png");
background-repeat: no-repeat;
width:181px;
height: 114px;
line-height: 114px;
color: #f7f7f7;
vertical-align: top;
margin-top: 10px;
margin-left: 10px;
cursor:pointer;
white-space: nowarp;
.join-us{
background-image: url("images/join_us.png");
background-repeat: no-repeat;
width:181px;
height: 114px;
line-height: 114px;
color: #f7f7f7;
vertical-align: top;
margin-top: 10px;
margin-left: 10px;
cursor:pointer;
white-space: nowarp;
}
Just add the following CSS to your .join-us class
border:none;
.join-us {
height:106px;
border:none;
}
Add both of these styles to your .join-us class.
border: none;
background-size: 100% 108%;
The border style will remove the small while line around your image. The background-size style will stretch out the image to fit perfectly into your class background with no white space.
You need to remove border: 2px outset buttonface; from your stylesheet.
Your background image height and input height are not equals. So as you see under image you have a void space that shows background-color.
So yaou have to set background-color equals transparent or change input height.
Use this:
background-color: rgba(0, 0, 0, 0);
background-image: url("images/join_us.png");
background-repeat: no-repeat;
border: 0 none;
color: #F7F7F7;
cursor: pointer;
height: 114px;
line-height: 114px;
margin-left: 10px;
margin-top: 10px;
vertical-align: top;
width: 181px;
How can I put text and image in a same line, like centered to image?
I tried some method, like vertical-align:middle; display: inline; but not working... where is my mistake?
Now:
my css code:
<style>
.entryDetailX {
float: right;
background: #2B587A;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
font-weight: bold;
color: #FFF;
padding: 6px;
}
.date {
float: right;
font-size: 9px;
padding-top: 1px;
background: url(/content/themes/mavi/img/custom/icon_time16x16.png) top left no-repeat;
padding-left: 20px;
margin-right: 10px;
}
.nick {
float: right;
margin-right: 20px;
color: #cc9900;
background: url(/content/themes/mavi/img/custom/icon_user16x16.png) top left no-repeat;
padding-left: 20px;
}
</style>
HTML:
<div class="entryDetailX">
<span class="date">18.01.2011 00:50:55</span>
<a class="nick">phantasm</a>
</div>
Thanks
You just need to Add the
background-position:left center;
Check on Fiddle
The images are background images and you need to set their position in the background css property. So, instead of top you can set center.
.date {
background: url(/content/themes/mavi/img/custom/icon_time16x16.png) left center no-repeat;
}
.nick {
background: url(/content/themes/mavi/img/custom/icon_user16x16.png) left center no-repeat;
}
If the above doesn't work, you can set how low the image to be in pixels. So, if you want the images to be 8px lower you can set
.date {
background: url(/content/themes/mavi/img/custom/icon_time16x16.png) left 8px no-repeat;
}
.nick {
background: url(/content/themes/mavi/img/custom/icon_user16x16.png) left 8px no-repeat;
}
There is a property, named background-position, to decide the background position. It takes two values, one for horizontal and one for vertical position. It could take center for both values.
When you write the following line of code, you set the background-position using the shorthand background. You explicitly ask to align the background is the top left corner.
background: <background-image> <background-position> <background-repeat>;
background: url() top left no-repeat;
You should write this code to vertically center your background image:
background: url() center left no-repeat;
You can play with this property on this jsfiddle.
Cheers,
Thomas.