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.
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);
}
What i want to achive is button on hover - background turn to white, text turn to transparent, keep in mind that body is filled with some image i my case, run my snippet.
In other words i want make a hole in button background with shape of given text and transparency
button {
padding:10px;
border:solid 5px #fff;
color: #fff;
background: none;
font-weight: bold;
font-size:2em;
}
button:hover {
color: transparent;
background: #fff;
}
body {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1280px-Mallard2.jpg");
background-size: 200px;
background-repeat: no-repeat;
}
<button>BUTTON</button>
When you set mix-blend-mode to hard-light, gray becomes transparent.
(Not supported by IE or Edge)
You can use it this way:
button {
padding:10px;
border:solid 5px #fff;
color: #fff;
background: none;
font-weight: bold;
font-size:2em;
}
button:hover {
color: gray;
background-color: white;
mix-blend-mode: hard-light;
}
body {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1280px-Mallard2.jpg");
background-size: 200px;
background-repeat: no-repeat;
}
<button>BUTTON</button>
You can use the CSS attribute background-clip: text;
A full tutorial can be found here: https://css-tricks.com/how-to-do-knockout-text/
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/
I was trying to create a circle with i icon in it for with CSS. However, when page is first rendered the circle looks like an inverted egg and covers the border around it slightly. (Zoom in the browser to see issue in more details)
The tricky part is, if you open Dev Tools and change any value related to it's position(width, height, whatever), everything will snap back to normal and it will become a circle.
https://jsfiddle.net/2yjashje/
<div class="round-egg">
i
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 10px;
cursor: help;
border-bottom: none !important;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
}
What is going on here?
I put the letter "i" in its own span and increased the margin from top to vertically centre it. As for the circle, I modified the border-radius property, and then removed the border-bottom: none; property as well. Assuming you want a circle, you need the bottom border.
https://jsfiddle.net/2yjashje/3/
<div class="round-egg">
<span class="icon">i</span>
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 30px;
cursor: help;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
display: table-cell;
}
.icon {
display: block;
margin-top: 2px;
}
I have assigned a background image to the select in html. The image is simply an arrow.
My code is:
select {
font-style: normal;
-webkit-appearance: none;
-moz-appearance: none;
-appearance: none;
background: url("/icons/dropdown_arrow.png") 135px center;
background-repeat: no-repeat;
border: 1px solid #cacaca;
padding: 10px;
width: 156px;
border-radius: 4px; }
The arrow is appearing very near to the end of the drop down.
Is there a way to move the array to left by say 20px so that drop down looks better.
I tried adding padding-left:150px but it hides the selected option in the select when drop down is in closed state.
Decrease the left position of your background image:
select {
font-style: normal;
-webkit-appearance: none;
-moz-appearance: none;
-appearance: none;
background: url("/icons/dropdown_arrow.png") 115px center;
/*----------------------------------------here-^^^-----------*/
background-repeat: no-repeat;
border: 1px solid #cacaca;
padding: 10px;
width: 156px;
border-radius: 4px;
}
For those facing this problem, the solution lies in the property background-position of the select element. I adjusted it and was able to move the arrow to desire position