Как установить изображения кнопок на основе типа браузера

Question

Я использую ASP.NET с бэкэнд C# и хочу, чтобы на сайте показывались разные изображения для мобильных и настольных версий. Я решил, что смогу сделать это с помощью CSS, но не могу понять, как это сделать. У меня есть разные файлы css, настроенные и работающие для других элементов, но для этих ImageButtons у меня плохое поведение. Если я не устанавливаю атрибут ImageUrl, он делает то, что мне нужно, но ставит «Поиск» и серый контур вокруг моих кнопок, так как он ищет несуществующий путь ImageUrl. Если я установил атрибут ImageUrl, как показано ниже, текст и окно исчезнут, но изображение не изменится по мере необходимости. Я пробовал это с тегами и img и LinkButtons, но получил одинаковые результаты в обоих направлениях. Каков наилучший способ изменить размер и изображение этих кнопок, если пользователь обращается через мобильное устройство?

<div class="clear hideSkiplink"> 
    <asp:ImageButton ID="button1" runat="server" CssClass="button1" 
    OnCommand="ImageButton_Click" CommandName="button1" 
    ImageUrl="~/images/topbutton1.png"/> 
    ... 
    <asp:ImageButton ID="button4" runat="server" CssClass="button4" 
    OnCommand="ImageButton_Click" CommandName="button1" 
    ImageUrl="~/images/topbutton4.png"/> 
</div> 

классы CSS выглядеть следующим образом:

Normal:

.topbutton1 
{ 
    padding: 0px 2px; 
    background-image: url('../images/topbutton1.png'); 
    background-position: center center; 
    background-repeat: no-repeat; 
    display: inline; 
    width: 180px; 
    height: 60px; 
} 

Mobile:

.topbutton1 
{ 
    padding: 0px 2px; 
    background-image: url('../images/topbutton1mobile.png'); 
    background-position: center center; 
    background-repeat: no-repeat; 
    display: inline; 
    width: 20%; 
    height: auto; 
} 

Answer 1

Использование CSS медиа запросов для переключения изображения на основе размера экрана:

Introduction to CSS Media Queries