I want to slide show the background image, but I don't know how to specify the width.

The background image is sticking out, but could you tell me how to make the width Max?

body{
/*  margin:010px;
    padding —00 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.5em00;
    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 —2px5px;
    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;
}

.boxp{
    padding —20px;
    background —rgba (255, 255, 255, .7);
    filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#B2FFFFFF, endcolorstr=#B2FFFF, gradienttype=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF, endColorstr=#B2FFFFFF);
    zoom:1;
    letter-spacing —1px;
}

.boxp+p{
    margin-top —20px;
}

<!DOCTYPE HTML>
<html>
<head>
    <metacharset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=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>

monaca css

2022-09-30 18:12

1 Answers

Use background-size to specify the size of the background image.

background-size: [image width] [image height];

To expand the background image to the full box, perform the following:
If you omit the height, auto is automatically applied.

background-size: 100%;

Other designators exist, such as cover where the image width-to-height ratio remains fixed and covers the display area of the background, and contain where the entire image is displayed with the same ratio fixed.

I think the following site will be helpful.
http://www.htmq.com/css3/background-size.shtml

2022-09-30 18:12

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656