ok - that markup helps.
first, the ~/ syntax is only for properties of server controls so you can't use that syntax nested inside of a style tag url().
My personal preference is to avoid putting the styles directly into the markup like this. instead, i would put those styles into a css sheet as class selectors, then i would assign the class selectors to the elements I'm trying to style. In addition to making your markup slightly smaller (no more embedded styles) this will also help you with your image paths.
when you define a url in a css sheet (like MyStyles.css), the image path is relative to where the css sheet is stored in your folder structure and not to which folder the aspx page is rendering from. so if the css sheet were in the root of your app and you had a subfolder for your images named imgs, then in the css sheet, you can set your urls like this:
background-image: url('imgs/2.png');
Since this image path is relative to where the css sheet is stored it will work whether the web page is pulled from your site root or from a subfolder.
The one path that you will now need to carefully deal with is the path to the stylesheet itself. Since the masterpage can be pulled from any page at any folder level, your stylesheet link needs to be able to deal with that. fortunately, that root relative ~/ syntax will work just fine for the css link tag.
in your masterpage head section you can add that css link like this:
<link runat="server"
id="csslnk1"
href="~/MyStyles.css"
rel="stylesheet" type="text/css" />
because the link is runat=server and were setting the href to ~/MyStyles.css, all your pages will get a proper link to the css stylesheet stored in the root of your app regardless of which subfolder your page is being pulled from.
since you defined any background-image urls inside the actual css stylesheet as being relative to the root of your app (where the stylesheet is stored) then all images will be found - again regardless of which subfolder your page is being pulled from.
hope this helps