Pascal Boschma Pascal Boschma - 4 years ago 122
HTML Question

Styling a button with repeat, but including two sides

Hello,

I'm just having a question, which may sound very dumb or noobish, but it's something I really like to know for future developments. I'm styling a button for the

<button>
tag in HTML. This is my code;

CSS

button {
line-height: 40px;
height:50px;
border: 3px solid black;
background:transparent;
cursor: pointer;
}

.minebutton {
font-family: "Minecraft Regular";
font-size:15px;
color:#ffffff;
background-image: url("http://minecreate.net/includes/imaging/buttons/mcb_left.png"),
url("http://minecreate.net/includes/imaging/buttons/mcb_middle.png"),
url("http://minecreate.net/includes/imaging/buttons/mcb_right.png") !important;
background-position: 0px 0px, left, right;
background-size: 30px 100%, 30px 100%, 30px 100%;
background-repeat: no-repeat,repeat-x,no-repeat;
}


HTML

<button class="minebutton" style="width:450px;">Don't click here</button>


The Question is, when I'm having this button, only the left side and the right middle appear, the right side doesn't appear on the far right side, and I think it's because of the 'repeat-x' in the middle image. How can I have the left part visible, and the middle part still repeating?

Thank you,

Answer Source

It looks like the image are layered in the given order so the second image hides the last one. If you reorder the images and fix the background-position and background-repeat accordingly you'll probably get the result you want.

For instance :

background-image: url("http://minecreate.net/includes/imaging/buttons/mcb_left.png"),
url("http://minecreate.net/includes/imaging/buttons/mcb_right.png"),
url("http://minecreate.net/includes/imaging/buttons/mcb_middle.png") !important;
background-position: 0px 0px, right;
background-size: 30px 100%, 30px 100%, 30px 100%;
background-repeat:  no-repeat,no-repeat,repeat-x;

See the fiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download