How to create a tiled background button using CSS - html

Question

I am trying to create a button like this (input type="submit"):
using an image that needs to be tiled to achieve the above effect.
I have tried doing this so far:
border: none;
background: url(myImage.png) no-repeat;
background-size: 80px 40px;
padding-left: 40px;
padding-right: 40px;
padding-top: 5px;
padding-bottom: 5px;
But looks like it is a lot of playing around with pixels numbers to achieve the desired effect. Is there an easier way of tiling to achieve this effect.

Answer 1

If you don't want to mess with gradients, here is a simpler way, as I see there isn't actually a gradient in your image, but a two-tone button.
You can achieve this two-tone effect without altering the HTML by using the pseudo-element :before to add a 50% tall, transparent white div.
If you this method you actually have a reflection on your button, so text and icons inside it will also have that "shine" (example).
#login{
background:#444;
display:inline-block;
color:white;
padding:10px 60px;
border-radius:8px;
position:relative;
}
#login:before{
content:'';
width:100%;
height:50%;
background:rgba(255,255,255,0.2);
position:absolute;
top:0px;
left:0px;
}
DEMO: http://jsfiddle.net/ySTbB/

Answer 2

Use CSS3 and border radius
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
SRC: http://www.colorzilla.com/gradient-editor/

Answer 3

If this is the actual image you want to use as background, it would probably be a better idea to just use CSS:
input[type="submit"]
{
border: none;
border-radius: 5px;
background: linear-gradient(to bottom, #AAA 49%, #555 50%);
}

Answer 4

This will work, if button-slice.jpg is a 40px tall, 1px wide jpg "slice" of the background tile pattern.
.button {
display: inline-block;
width: 170px;
height: 40px;
line-height: 40px;
text-align: center;
background: url(button-slice.jpg) repeat-x;
border: 0;
border-radius: 8px;
text-decoration: none;
}
You could also forego images completely and use CSS3 gradients to create that background effect instead, which is probably a better solution if it's only intended for iOS.

Answer 5

Since you can use CSS3 I strongly suggest using it as such:
input[type="submit"] {
background: #3e3e3e;
background: -moz-linear-gradient(top, #616161 0%, #777777 50%, #3b3b3b 51%, #393939 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#616161), color-stop(50%,#777777), color-stop(51%,#3b3b3b), color-stop(100%,#393939));
background: -webkit-linear-gradient(top, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
background: -o-linear-gradient(top, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
background: -ms-linear-gradient(top, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
background: linear-gradient(to bottom, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616161', endColorstr='#393939',GradientType=0 );
border-radius: 6px;
color: white;
min-width: 100px;
padding: 10px 15px;
text-align: center;
text-decoration: none;
}
It'll load a lot faster and render nicer on different DPI devices.

Answer 6

I would use a gradient background with an image as a backup for browsers that do not support gradient. The image bg will tile automatically and the border radius will ensure rounded corners.
DEMO http://jsfiddle.net/kevinPHPkevin/hSwJN/16/
#submit {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
display: inline-block;
color: #000;
font-family:'Oswald';
font-size: 20px;
padding: 12px 24px;
border:none;
background:url('http://www.islandpoolnspa.com/More_info_button_background_rot_180.jpg');
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}