I want to make my button responsive, so I can't use the image together with background. I can use the second picture of the cart only, but how can style it, so part of it remains outside?
You could apply the background-image to a :pseudo-element of a button element and position them using top and left properties.
button {
position: relative;
width: 20%;
height: 35px;
background: #B7004A;
border: none;
border-radius: 5px;
}
button:before {
position: absolute;
content: '';
width: 100%;
height: 110%;
top: -7px;
left: -3px;
background: url(http://i.stack.imgur.com/Aiy4E.png) no-repeat;
background-size: auto 105%;
}
<button></button>
Is it something like this you are looking for?
jsFiddle: http://jsfiddle.net/vgayjg9j/2/
EDIT: updated the jsFiddle. It now sticks out.
<button><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/shoping_cart.png" /></button>
button {
width: 120px;
height: 40px;
}
button img {
height: 100%;
float:left;
}
From your question I think you want to button to fill the screen if it is on smaller devices?
Media queries is where you should start.
Also make sure you use % for the width of the button, for example if you want you button to fill the screen the css would look something like this:
button {
width: 100%;
}
And if the image should not change then I would define the width of the image in pixels:
button img {
width: 40px;
}
Related
I'm trying to add a stylish "wave" element to the top of a div, however with my attempts, the svg moves from its position and leaves a gap when the browser resizes.
Here's a mockup of what it should look like:
CSS:
.wave {
position: absolute;
top: -72px;
}
.container {
background: #eee;
}
.col-1 {
height: 200px;
}
.col-2 {
position: relative;
background: #fff;
height: 100px;
width: 100%;
margin-top: 100px;
}
My other attempt was using background-image: url(wave.svg); in a :after selector, but same results.
Here's a codepen:
https://codepen.io/anon/pen/LmRyLK
How can I get the wave to keep put as is when it's resizing and when it's not?
Set your SVG as a background image on the element where you have your funky purple bit, you can stack the background images on each other, like so:
.purpleElement{
background: url("/path/to/asset/image.svg") bottom center no-repeat, purple;
background-size: 100%;
/*I've set a height here to replicate content*/
height: 70vh;
width: 100%;
}
I've forked off your codepen to show what will happen
Dont know what to call it but I want a border that doesnt follow the divs height:100%; but is centered between top and bottom of the parent div.
What is the best solution? creating another div that contains the border? or is there any options in css that I dont know off?
heres a codepen to my current footer with the divs im using:
http://codepen.io/Volcan3/pen/yVoNZB
You could use pseudo classes to mimic a border that doesn't cover "100%"...
http://codepen.io/anon/pen/yVoORm
.footer-item::after {
content: '';
display: block;
height: 80px;
width: 1px;
background-color: red;
position: absolute;
right: 0;
top: 50%;
margin-top: -40px;
}
and then don't forget to make the parent item relative and a block:
.footer-item {
display:block;
height: 100%;
position: relative;
}
I have effectively use the following css style:
input.my-text:focus { background-image: none; }
It works great. But how do I continue to hide the background image when the textbox gets populated? I only want the background image to show when the textbox is blank.
I tried :valid: but that does not work the way I need it too.
Is this do-able in css or do I need to resort to javascript/jquery ?
Thanks.
How about "hacking" the placeholder functionality.
http://jsfiddle.net/f01g6spe/1/
input{
position: relative;
}
input::-webkit-input-placeholder{
background: pink;
display: block
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
I have a template i need to override.My div is centered in the middle and as my design uses a fullwidth ribbon i used :before and :after to create the effect.it worked now on top of that ribbon i need to have an image displayed on top of it.it works for the main div but for the pseudo elements i cant get it to work.
.backbox:before
{
content: '';
display: block;
width: 5000px;
height: 400px;
background-color: gray;
background-image:url(/wp-content/uploads/2014/08/buildings.png) ;
background-position:bottom;
background-repeat: no-repeat;
top:0px;
background-repeat: no-repeat;
position: absolute;
left: -4985px;
z-index: 5;
}
.backbox:after
{
content: '';
display: block;
width: 5000px;
height: 400px;
background-color: gray;
background-image:url(/wp-content/uploads/2014/08/buildings.png) ;
background-position:bottom;
background-repeat: no-repeat;
position: absolute;
right: -4985px;
z-index:5;
}
Edit:
As you requested here is an image of what the web page should actually look like
Can't you use z-index for this?
So put make a div surrounding both the ribbon and the image you want to put on top of it. Then make the ribbon a z-index: 1; and the image and z-index: 2;
I want to make a screen unclickable by spreading a think transparent layer of any color over the screen on the click event of a button using CSS.
Please help with this.
Using jQuery and CSS, you could define a class .spread :
.spread {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.5;
z-index: 200;
}
And when you click on the button:
$('body').append("<div class='spread'></div>");
This would add the div to the body, and the div would position itself in the top left corner. You may also have to put:
body {
margin: 0;
}
Example: http://jsfiddle.net/jcolicchio/TuP2A/
It should be super easy
HTML
<body>
some code here
<div class=overlay><div>
</body>
CSS
.overlay {
position: fixed;
z-index:100;
top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,.0);
}