私のonclickメニューに画像を追加する

Question

私のonclickmenuに画像を追加しようとしています。 onclick-menu divの背景画像として追加しようとしました。 他の方法がありますか？好きなjavascriptではありません。

Htmlの

<div tabindex="0" class="onclick-menu"> 
    <ul class="onclick-menu-content"> 
     <li><button onclick="alert('Unable to login without register')"><form> 
       <input type="submit" alt="Submit" value="Login"> 
      </form> </button></li> 
     <li><button onclick="alert('Unable to register')"><form> 
       <input type="submit" alt="Submit" value="Register"> 
      </form></button></li> 
     <li><button onclick="alert('Unable to logout while not being online')"><form> 
       <input type="submit" alt="Submit" value="Log out"> 
      </form> </button></li> 
    </ul></div> 

のCss

.onclick-menu { 
    position: relative; 
    display: inline-block; 
    background-image: "Login.jpg"; 
} 
.onclick-menu:before { 
    content: "1"; //Here´s where the image is supposed to be. 

} 
.onclick-menu:focus { 
    /* clicking on label should toggle the menu */ 
    pointer-events: none; 
} 
.onclick-menu:focus .onclick-menu-content { 
    /* opacity is 1 in opened state (see below) */ 
    opacity: 1; 
    visibility: visible; 

    /* don't let pointer-events affect descendant elements */ 
    pointer-events: auto; 
} 
.onclick-menu-content { 
    position: absolute; 
    z-index: 1; 

    /* use opacity to fake immediate toggle */ 
    opacity: 0; 
    visibility: hidden; 
    transition: visibility 0.5s; 
} 

Answer 1

必要に応じてそれをスタイル、:beforeまたは:afterセレクタを使用してください。例えば。

element:before { 
content: "images/img.jpg"; 
} 

Answer 2

だけ（URLを追加）

element:before { 
    content: url(images/img.jpg) 
}