Добавление фона img, если разрешение экрана по ширине> 1028

Question

Привет, ребята,

Я довольно новичок в JavaScript.У меня есть довольно простой скрипт, который я написал, чтобы добавить фоновое изображение, если ширина экрана превышает 1028 пикселей.

К сожалению, после попытки этого (на другом компьютере, с разрешением 800x600) он не работает.

Я не собираюсь растягивать изображение, просто добавьте его, если ширина экрана больше или равна 1024.

Вот код:

    <SCRIPT language="JavaScript">
    <!--
    document.write('<style type="text/css">div#container_header_body {background-image:url(\'');
    if (screen.width<1024)
    {
     document.write('none;');
    }
    else
    {
      document.write('images/mmmgirl.png');
    }
    document.write('\');</style>');
    //-->
    </SCRIPT>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

Кто-нибудь может дать мне некоторое представление о том, что я делаю неправильно?

Большое спасибо.Я уже узнал много из этого места.

- - Андрей

Answer 1

Нет необходимости в JavaScript, просто используйте медиазапрос CSS :

@media all and (min-width: 1024px) {
    background-image: url(images/mmmgirl.png);
}

Answer 2

Попробуйте этот jsfiddle :

var screenWidth = screen.width,
    container = document.getElementById('container_header_body');

console.log(screenWidth);

if (screenWidth > 1024) {
     container.style.backgroundImage = 'url(http://oddanimals.com/images/lime-cat.jpg)';
} else {
    container.style.backgroundImage = 'none';
}