Установка фонового изображения в соответствии с разрешением экрана

Я хотел бы быть в состоянии изменить свой веб-страницу фонового изображения в соответствии с разрешением экрана пользователя использует так:Установка фонового изображения в соответствии с разрешением экрана

если разрешение экрана больше или равно 1200 * 600 затем фон = mybackground.jpg no-repeat или еще. Как я могу это сделать?

источник

2010-06-30 prakasam

или что ли? вы имели в виду: 'или иначе background = myalternatebackground.jpg no-repeat' –

медиа-запросы в css3 – kim366

Обсуждаются чистые подходы CSS, которые работают очень хорошо here. В частности, рассматриваются два метода, и я лично предпочитаю второй, поскольку он не зависит от CSS3, который лучше подходит для моих собственных потребностей.

Если у всего/всего вашего трафика есть браузер с поддержкой CSS3, первый способ выполняется быстрее и чище (копия/вставка г-на Зойдберга в другом ответе здесь для удобства, хотя я бы посетил the source для дальнейшего ознакомления почему он работает).

Альтернативным методом для CSS является использование jQuery библиотеки JavaScript для обнаружения изменений разрешения и соответственно корректировки размера изображения. This article охватывает технику jQuery и предоставляет живую демонстрацию.

Supersized - это специальная библиотека JavaScript, предназначенная для статических полноэкранных изображений, а также полноразмерных слайд-шоу.

Хорошим советом для полноэкранных изображений является масштабирование их с правильным соотношением заранее. Обычно я предпочитаю размер 1500x1000 при использовании supersized.js или 1680x1050 для других методов, устанавливая качество jpg для фотографий между 60-80%, что приводит к размеру файла в области 100kb или меньше, если это возможно, без ущерба для качества ,

источник

2010-06-30 09:35:33 Kynth

Привет, версия javascript, которая изменяет фоновое изображение src в соответствии с разрешением экрана. Вы должны иметь разные изображения, сохраненные в нужном размере.

<html> 
<head>  
<title>Javascript Change Div Background Image</title>   
<style type="text/css">  
body { 
     margin:0; 
     width:100%; 
     height:100%; 
} 

#div1 { 
    background-image:url('sky.jpg'); 
    width:100% 
    height:100% 
}  

p {  
    font-family:Verdana;  
    font-weight:bold;  
    font-size:11px;  
}  
</style>  

<script language="javascript" type="text/javascript"> 
function changeDivImage()  
{ 
//change the image path to a string 
var imgPath = new String();   
imgPath = document.getElementById("div1").style.backgroundImage; 

//get screen res of customer 
var custHeight=screen.height; 
var custWidth=screen.width; 

//if their screen width is less than or equal to 640 then use the 640 pic url 
if (custWidth <= 640) 
    { 
    document.getElementById("div1").style.backgroundImage = "url(640x480.jpg)"; 
    } 

else if (custWidth <= 800) 
    { 
    document.getElementById("div1").style.backgroundImage = "url(800x600.jpg)"; 
    } 

else if (custWidth <= 1024) 
    { 
    document.getElementById("div1").style.backgroundImage = "url(1024x768.jpg)"; 
    } 

else if (custWidth <= 1280) 
    { 
    document.getElementById("div1").style.backgroundImage = "url(1280x960.jpg)"; 
    } 

else if (custWidth <= 1600) 
    { 
    document.getElementById("div1").style.backgroundImage = "url(1600x1200.jpg)"; 
    } 

else { 
    document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)"; 
    } 

    /*if(imgPath == "url(sky.jpg)" || imgPath == "")   
    {    
    document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";   
    } 
    else   
    {    
    document.getElementById("div1").style.backgroundImage = "url(sky.jpg)";   
    }*/ 
}  

</script> 
</head> 
<body onload="changeDivImage()">    

<div id="div1"> 

<p>This Javascript Example will change the background image of<br />HTML Div Tag onload using javascript screen resolution.</p>  
<p>paragraph</p> 
</div>  

<br/>  

</body> 
</html>

источник

2010-08-24 02:10:19

Я знаю, что это слишком старый вопрос, но подумал, что он может помочь кому-то. Если вы видите твиттер, вы найдете что-то очень сложное, но чистое css-подход для достижения этого.

<div class="background"><img src="home-bg.png" /></div> 
Applied CSS 
.background { 
    background: none repeat scroll 0 0 #FFFFFF; 
    height: 200%; 
    left: -50%; 
    position: fixed; 
    width: 200%;} 

.background img{ 
    bottom: 0; 
    display: block; 
    left: 0; 
    margin: auto; 
    min-height: 50%; 
    min-width: 50%; 
    right: 0; 
    top: 0;}

Это фоновое изображение подходит для всех размеров. даже портретный вид ipad. он всегда настраивает изображение в центре. если вы уменьшаете масштаб; изображение останется прежним.

источник

2012-10-09 08:05:33 bhupen

Удаление «фоновую тело код изображения», а затем вставить этот код:

html { 
    background: url(../img/background.jpg) no-repeat center center fixed #000; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

источник

2012-10-16 04:35:03

это прекрасный ответ –

У меня была эта же проблема, но теперь нашли разрешение на это.

Фокус в том, чтобы создать изображение обоев 1920 * 1200. Когда вы применяете эти обои к разным машинам, Windows 7 автоматически изменяет размер для наилучшего соответствия.

Надеется, что это помогает вам все

источник

2012-12-13 10:25:22

Set телу CSS для:

body { 
background: url(../img/background.jpg) no-repeat center center fixed #000; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

}

источник

2013-10-14 12:52:22 havefun

Введен в CSS файл:

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

URL изображений/BG.jpg Ваше фоновое изображение

источник

2014-01-22 05:13:12 FMOYOTA

Установка фонового изображения в соответствии с разрешением экрана

ответ

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