モバイルまたはデスクトップに基づく背景画像

フッタに背景画像とテキストのみを表示するWebページを作成しましたが、これはデスクトップユーザの訪問者にとっては効果的でしたが、モバイルユーザの訪問者にとっては画像は画面サイズに自動的にリサイズされません。モバイルまたはデスクトップに基づく背景画像

がここにこれは私のcss

body { 
    margin-top: 50px; 
    margin-bottom: 50px; 
    background: none; 
} 

.full { 
    background: url('../1_v3.png') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size:cover; 
} 
.navbar-header { 
    float: left; 
    padding: 15px; 
    text-align: center; 
    width: 100%; 
} 
.navbar-brand {float:none;}

であり、これはHTMLファイルです：

<!DOCTYPE html> 
<html class="full" lang="en"> 
<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>TEXT HERE/title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="css/the-big-picture.css" rel="stylesheet"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body> 

    <!-- Navigation --> 
    <nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"> 

     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <a class="navbar-brand"> TEXT HERE</a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 
    <!-- /.container --> 

    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 

</body> 

</html>

は、ユーザデバイスの画面サイズに基づいて背景画像のサイズを変更する任意のCSSのトリックはありますか？

P/S：私のイメージは、あなたのメディアクエリでサイズ2536x1420の解像度

出典

2016-09-09 Robbi Nespu

スタイリングあなたの背景のサイズがカバーするのではなく、含まれています！ –

opps @RudiUrbanek、問題はカバータグ付きです –

ているあなたは、あなたがそれをしたい画像を表示するように背景の位置を指定することができます。ここで

はhttp://hubenterprises.com.mx/stackOverflow/index.html

が私のWebページ上のインスペクタでそれで遊ぶこと自由に感じ実施例です。

それともここにあなたのためのコードは（クロームで表示）である

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="index.css"> 
</head> 
<body> 
    <div class='stretch'> 

    </div> 
</body> 
</html>

CSS

.stretch { 
    background-image: url("http://hubenterprises.com.mx/github/bg.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 100% 100%; 
    width: 100vw; 
    height: 100vh; 
    outline: 1px solid; 
} 
body { 
    margin: 0; 
} 

@media only screen and (max-width: 500px) { 
    .stretch { 
     background-position:50% 50% ; 
    } 
}

出典

2016-09-09 03:55:23 Krunkmaster

はあなたを移動するために身体にマージンを適用するもの
のスタイルをhtml要素を使用することはありません内容が再現可能ではありません
要素に100％の幅を適用し、パディングも忘れないでください（ボックスサイズ：ボーダーボックス;）を追加

body { 
 
    margin:0; 
 
    background: url('https://pixabay.com/static/uploads/photo/2016/01/12/19/16/painting-1136443_1280.jpg') no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
.navbar-header { 
 
    float: left; 
 
    padding: 15px; 
 
    text-align: center; 
 
    width: 100%; 
 
    background: rgba(255,255,255,0.4); 
 
    box-sizing: border-box; 
 
} 
 
.navbar-brand { 
 
    float: none; 
 
}

<!-- Navigation --> 
 
<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"> 
 

 
    <div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand"> TEXT HERE</a> 
 
    </div> 
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container --> 
 
</nav> 
 
<!-- /.container --> 
 

 
<!-- jQuery --> 
 
<script src="js/jquery.js"></script> 
 

 
<!-- Bootstrap Core JavaScript --> 
 
<script src="js/bootstrap.min.js"></script>

出典

2016-09-09 04:00:46

モバイルまたはデスクトップに基づく背景画像

答えて

関連する問題