I am trying to rotate the background-image inside of my button but I seem to only be getting the background color I specify, not the background-image over the top. I have a transparent part of the photo to create an arch-like look on the button. Here is my css:
#sign-in-button > div > button.btn.btn-default {
color: #fff;
background-color: #da1a32;
position: relative;
overflow: hidden;'
/* background-image: url('/images/arch-red-flip.png'); */
/* background-repeat: no-repeat; */
/* background-size: cover; */
}
#sign-in-button > div > button.btn.btn-default:before {
content: "";
position: absolute;
z-index: -1;
background-size: cover;
transform: rotate(30deg);
background-image: url('/images/arch-red-flip.png') 0 0 no-repeat;
}
<div class="col-sm-12">
<div class="col-sm-6" id="right-border">
<div class="row" id="sign-in-button">
<div class="col-xs-3"></div>
<div class="col-xs-4"></div>
<div class="col-xs-5">
<button type="button" class="btn btn-default">SIGN IN</button>
</div>
</div>
</div>
</div>
It's because you are using the background
shorthand notation on background-image
property.
button.btn.btn-default { color: #fff; background-color: #da1a32; position: relative; overflow: hidden; padding: 3em; } button.btn.btn-default::before { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; transform: rotate(30deg); background: url(https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded) 0 0 no-repeat; background-size: contain; }
<button type="button" class="btn btn-default">SIGN IN</button>
Note however that the image will be on top of the text and using z-index:-1
will cause the pseudo-element to be placed under the button...I would recommend an internal span to solve this.
button.btn.btn-default { color: #fff; background-color: #da1a32; position: relative; overflow: hidden; padding: 3em; } button.btn.btn-default span { position: relative; } button.btn.btn-default::before { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; transform: rotate(30deg); background: url(https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded) 0 0 no-repeat; background-size: contain; }
<button type="button" class="btn btn-default"><span>SIGN IN</span></button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.