0

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

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;
}
<!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>
0

1 件の回答 1

1

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

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

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

background-size: 100%;

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。