Фоновое изображение должно иметь разрешение окна

-2

, скажем, мой тег тела имеет фоновое изображение с разрешением 1920 x 1020. Когда я загружаю свою страницу, мое окно имеет размер ~ 800 x 800. Я не знаю, t хотите загрузить разрешение 1920 x 1020, только 800 x 800 мне нужно будет отображать фоновое изображение.Фоновое изображение должно иметь разрешение окна

Любой способ достичь этого?

http://jsfiddle.net/49qvq7rw/

<div class="give_me_background_plx"> 

</div> 

body, 
html { 
    height:100%; 
    width:100%; 
} 

.give_me_background_plx { 
    background: url("http://placehold.it/1920x1000") center center, 100% 100%; 
    height:100%; 
    width:100%; 
}

Edit: Смотрите jsfiddle. Когда я открываю эту страницу, я не хочу загружать полное загружаемое изображение, а меньшую версию, которая является именно размером окна. Как и в img-теге, я хочу установить высоту/ширину для этого изображения, и это должен быть мой размер окна.

источник

2015-11-20 ChrisK

, пожалуйста, покажите код, который вы уже сделали. Кроме того, вы просто спрашиваете, как сделать все ваше изображение, а не обрезать окно? Попытайтесь посмотреть в «background-size: содержать» или «background-size: cover». Если это проблема с загрузкой, тогда вам понадобится разный CSS для разных точек останова (медиа-запросы) – ntgCleaner

Чтобы получить больше шансов быть понятым и получить более быстрый ответ, попробуйте опубликовать код, который у вас есть, с вопросом – RiccardoC

Нет, saddly not , Я знаю, как настроить полноразмерный фон. Но я хотел бы знать, могу ли я обрезать размер, чтобы меньшее устройство загрузило меньшее изображение без использования разных изображений. – ChrisK

К сожалению, это то, что вы можете выполнить только Javascript (лично я предпочитаю jQuery).

Потому что вы только хотите загрузить один изображения и не нагрузки в другом изображении, когда окно становится больше (как ответ Роя выполняет).

JQuery будет что-то подобное:

$(document).ready(function() { 
    if ($(window).width() <= 800) { // if the width is equal to, or smaller than 800 px. 
     $("body").css("background","url(image-800.jpg) no-repeat"); // load the small image 
    } else { // if the width is bigger than 800 px 
     $("body").css("background","url(image-1920.jpg) no-repeat"); // load the bigger image. 
    } 
});

JSFiddle demo with your gravatar

Примечание: Для того, чтобы протестировать демо, ваш должен загрузить страницу с малой шириной, а затем загрузить его с шириной большей чем 800 пикселей.

источник

2015-11-20 15:12:01

Только выполнить с Javascript, я так не думаю. Вы протестировали мой ответ со своей сетевой вкладкой в Chrome Devtools? В вашем окне просмотра будет загружено только одно изображение. Когда вы измените размер на другое изображение, оно будет загружено.Нет необходимости в Javascript и чистом CSS намного чище. – Roy

Точно, он загружает и другое изображение (если экран становится больше в точке). Но OP прокомментировал в вашем ответе, что он хочет загрузить ровно ОДИН образ, поэтому либо большой, либо маленький, а не маленький, если раньше он уже был загружен. Это достигается только с помощью Javascript. –

@ChrisK, это правда? Пожалуйста, уточните свой вопрос. Я не могу сделать это из вашего вопроса. – Roy

Значит, вы хотите загрузить другое изображение относительно области просмотра? Использование запросов СМИ CSS для этого:

body { 
    background: url(image-1920.png); 
} 

@media(max-width:800px){ 
    body { 
     background: url(image-800.png); 
    } 
}

источник

2015-11-20 15:00:24 Roy

Я хочу загрузить ровно одно изображение, и это изображение должно быть точным размером окна. Это может звучать глупо, потому что, когда я загружаю изображение с разрешением 800 х 800, а затем переходим в полноэкранный режим, разрешение фона будет очень плохо. Но это то, чего я хочу достичь на данный момент. – ChrisK

Изменен ваш ответ, чтобы добавить 'body {' в медиа-запросы, так как в противном случае вы не будете изменять какой-либо css. :) –

@ Daan Heskes: Я принял ваше редактирование. – Roy

устанавливаемых сотового тега тела муз быть 100% (ширина: 100%), или же вы можете использовать фон размера свойства, чтобы установить размер вашего изображения в задний план.

источник

2015-11-20 15:03:36

Фоновое изображение должно иметь разрешение окна

ответ

Смежные вопросы