

背景画像がはみ出てしまうのですが、横幅をマックスにする方法を教えていただけないでしょうか？  

[code]

    body {
    /*  margin: 0 10px;
        padding: 0 0 50px;
        background: #F2F2F2;
        color: #222;
        line-height: 1;
        font-size: 20px;*/
    }
    
    .header, .footer, .section {
    /*  display: block;
        width: 700px;
        margin: 0 auto;*/
    }
    
    .header, .footer {
        text-align: center;
    }
    
    .footer {
        margin-top: 1em;
    }
    
    h2 {
        margin: 1em auto 0.5em;
    }
    
    p {
        margin: 0.5em 0 0;
        line-height: 1.5;
    }
    
    p:first-child {
        margin-top: 0;
    }
    
    form {
        overflow: hidden;
    }
    
    input, label, select {
        vertical-align: middle;
    }
    
    input[type="radio"] + label {
        margin-right: 10px;
    }
    
    input[type="number"] {
        width: 5em;
        padding: 2px 5px;
        border: 1px solid #CCC;
        border-radius: 3px;
        font-size: 15px;
    }
    
    table {
        float: right;
        width: 320px;
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    table:first-child {
        float: left;
    }
    
    th, td {
        height: 50px;
        border-bottom: 2px solid #CCC;
        text-align: left;
        vertical-align: middle;
        font-weight: normal;
    }
    
    .actions {
        padding: 0;
        overflow: hidden;
        vertical-align: middle;
    }
    
    .actions li {
        display: inline;
        list-style: none;
    }
    
    .box {
        min-height: 460px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .box p {
        padding: 20px;
        background: rgba(255, 255, 255, .7);
        filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#B2FFFFFF,endcolorstr=#B2FFFFFF,gradienttype=0);
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF)";
        zoom: 1;
        letter-spacing: 1px;
    }
    
    .box p + p {
        margin-top: 20px;
    }
    
[/code]

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/style2.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.bgswitcher.js"></script>
        <script>
        $("document").ready(function(){
          $(".box").bgswitcher({
            images: ["img/image1.gif","img/image2.gif","img/image3.gif"],
            effect: "drop"
          });
        });
        </script>
    <body>  
        <div class="box">
          <p>xxxxxx</p>
        </div>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-03-09T09:53:57.420
7656
2015-03-10T05:27:19.890
7724
question
monaca css
背景画像をスライドショーしたいのですがwidth指定の方法が分かりません。


背景画像のサイズを指定するには、`background-size`を利用します。

[code]

    background-size: [画像の幅] [画像の高さ];
    
[/code]

背景画像を適応したボックスいっぱいに広げるには以下のようにします。  
なお、高さを省略すると自動的に`auto`が適応されます。

[code]

    background-size: 100%;
    
[/code]

その他、画像の幅と高さの比率は固定されたまま、背景の表示領域を覆うように表示し、はみ出した部分がカットされる`cover`や、同じく比率を固定したまま画像全体が表示されるようになる`contain`などの指定子が存在します。

以下のサイトが参考になると思います。  
<http://www.htmq.com/css3/background-size.shtml>


CC BY-SA 3.0
2015-03-10T05:27:19.890
7695
2015-03-10T05:27:19.890
8351
7656
answer