Click here to Skip to main content
15,073,511 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hey there,

I am busy trying to just make a few layouts, but I am stumped by an issue I cannot seem to get around.

Basically I have made a button in Photoshop, and I would like to put that button in as the background of the navbar, ie: have a button with text over it, but use 1 button background and just put the text between the list's '<ul><li>' brackets.

What is the issue is that the button doesn't show the whole image, just over the background of the text.

How do I get it to show the whole image and not just the image behind the text?

Thanx,
Josh
(EDIT: ul, li tags encoded)
Posted
Updated 4-Oct-12 22:24pm
v2

1 solution

This code will do it. Without having seen yours, can't say what needs to be changed.
This draws 2 button 400px wide with 3 lines of text each. The background image is a 5x5 pixel + symbol.
The first stretches the image to cover the button. The second simply tiles the image.

HTML
<!DOCTYPE html>
<html>
<head>
<style>
button
{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQIW2NkQID/QCYjiAsmoABFEMRBAThVYmgHAAhoBQWHhfyYAAAAAElFTkSuQmCC);
    border-width: 4px;
    width: 400px;
}
#btn1
{
    background-size: 100% 100%;
    background-repeat:no-repeat;
}
</style>
</head>
    <body>
        <button id='btn1'>This is<br>some text<br>Line 3</button>
        <button id='btn2'>This is<br>some text<br>Line 3</button>
    </body>
</html>
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900