平板电脑上的背景图片并未延伸至全宽

时间:2013-01-30 11:07:53

标签: html css css3 responsive-design

enter image description here我正在尝试自适应设计。

此处链接:http://truewizard.com.au/buildzone/v2/

我已经从我的关系中附上了这个问题的图片。

我认为这可能与这行代码有关:

 <meta name="viewport" 
  content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />  

任何想法?

CSS:                 body,html {                 填充:0像素;                 保证金:0像素;                 高度:100%;                 }

            body {
            background:#0f0f0f;
            font-family: "Calibri", Georgia, sans-serif;
            font-size:14px;
            line-height:30px;
            color:#bdbdbd;
            }

            a {
            text-decoration:none;

            }

            /* Clearfix */

            .clearfix:after {
                content: ".";
                display: block;
                clear: both;
                visibility: hidden;
                line-height: 0;
                height: 0;
            }

            .clearfix {
                display: inline-block;
            }

            html[xmlns] .clearfix {
                display: block;
            }

            * html .clearfix {
                height: 1%;
            }


            /*Header*/

            #title_bar #logo {
            float: left;
            }

            #title_bar #phone-number {
            float: right;
            }

            #banner {
            background:url(images/banner.jpg) no-repeat;
            }

            #banner .container {
            position:relative;
            }

            .learn_more {
            font-size:18px;
            display:inline-block;
            padding-right:15px;
            background:url(images/learn_more_arrow.png) no-repeat right center;
            }

            .learn_more a {
            color:#63d1ff;
            }



            /*service Tabs*/

            .tab_body {
            position:relative;
            }

            .tab_body img {
            margin:0 auto;
            display:block;
            position:relative;
            top:25%;
            }


            /*Main Wrap*/

            #main_wrap {
            padding-top:40px;
            }

            #quote_form {
            width:385px;
            height:409px;
            background:url(images/quote_form.jpg) no-repeat;
            padding:90px 40px 0 30px;
            }

            #quote_form input {
            width:276px;
            height:27px;
            background:#1f1e1e;
            border:1px solid #282828;
            color:#bdbdbd;
            }

            #quote_form textarea {
            background:#1f1e1e;
            border:1px solid #282828;
            width:272px;
            height:200px;
            }

            #quote_form #quote_form_submit {
            color:#bdbdbd;
            background:#3c3c3c;
            cursor:pointer;
            }

            #quote_form fieldset {
            border:0;
            }

            #quote_form td {
            padding:2px 0 2px 0;
            }

            #quote_form .quote_form_label {
            padding-right:20px;
            }

            .highlight_text {
            color:#25aae1;
            font-size:18px;
            }

            #main_wrap .highlight_text {
            margin:0;
            }


            h3 {
            color:#fff;
            margin:0;
            padding:0;
            font-size:14px;
            }

            .tab_title {
            text-align:center;
            height:37px;
            padding-top:5px;
            }

            #testomonials_box {
            height:433px;
            clear:both;
            }

            #testomonials_bg {
            height:331px;
            background:url(images/testomonials_box.jpg);
            }

            #clients_say {
            height:62px;
            padding-top:40px;
            }

            /*slideshow*/

            #slides {
            position:relative;
            height:331px;
            }

            .slides_container {     
            height:273px;

            }

            .slides_container div {     
            display:block;

            }

            .testomonial_text {

            margin-top:40px;
            text-align:center;
            }

            .testomonial_text p {
            text-align:right;
            padding-right:50px;
            }


            .pagination {
            margin:0;
            padding:0;
            height:11px;
            overflow:hidden;
            width:84px;
            margin:0 auto;
            }

            .pagination li {
            float:left;
            padding:0 5px 0 5px;
            list-style:none;
            }

            .pagination li a {
            background:url(images/pagination.png) no-repeat;
            width:11px;
            height:11px;
            display:block;
            padding-top:15px;
            }


            /*footer*/

            #footer {
            background:url(images/footer_bg.gif) repeat-x;
            height:400px;
            }

            @media screen and (min-width: 960px) {

                    #banner {
                    height:613px;
                    }

                    #refreshing_approach {
                    margin:50px auto 10px auto;
                    }

                    #desc {
                    color:#fff;
                    font-size:18px;
                    width:640px;
                    padding-left:60px;
                    }

                    .container {
                    width:960px;
                    margin:0 auto;
                    }

                    #title_bar {
                    height:67px;
                    background:#1f1f1f;
                    }

                    #service_tabs {
                    height:200px;
                    position:absolute;
                    /*top:413px;*/
                    top:413px;
                    }

                    #web_design_tab {
                    width:210px;
                    height:200px;
                    margin-right:40px;
                    float:left;
                    }

                    #web_design_tab img{


                    }

                    #print_design_tab {
                    width:210px;
                    height:200px;
                    margin-right:40px;
                    float:left;
                    }

                    #ecommerce_tab {
                    width:210px;
                    height:200px;
                    margin-right:40px;
                    float:left;
                    }

                    #internet_marketing_tab {
                    width:210px;
                    height:200px;
                    float:left;
                    }

                    .tab_title {
                    width:210px;
                    background:#1f1f1f;
                    }

                    .tab_body {
                    height:158px;
                    width:210px;
                    background:#2f2e2e;
                    }

                    #left_box {
                    float:left;
                    width:460px;
                    }

                    #right_box {
                    float:right;
                    width:460px;
                    padding:10px 0 30px 0;
                    }



                    .testomonial_text {
                    width:960px;
                    font-size:40px;
                    line-height:50px;
                    }



            }


            @media screen and (min-width: 760px) and (max-width:959px) {

                    #banner {
                    height:960px;
                    width:100%;
                    }

                    #refreshing_approach {
                    margin:80px auto 10px auto;
                    max-width:100%;
                    }

                    #desc {
                    color:#fff;
                    font-size:18px;
                    width:640px;
                    padding-left:60px;
                    }

                    .container {
                    width:760px;
                    margin:0 auto;
                    }

                    #title_bar {
                    height:67px;
                    background:#1f1f1f;
                    }

                    #service_tabs {
                    height:547px;
                    position:absolute;
                    top:500px;
                    width:680px;
                    margin:0 auto;
                    padding:0 40px 0 40px;
                    }

                    #web_design_tab {
                    width:320px;
                    height:200px;
                    margin-right:40px;
                    float:left;
                    margin-bottom:40px;
                    }

                    #print_design_tab {
                    width:320px;
                    height:200px;
                    margin-right:0px;
                    float:left;
                    }

                    #ecommerce_tab {
                    width:320px;
                    height:200px;
                    margin-right:40px;
                    float:left;
                    margin-bottom:40px;
                    }

                    #internet_marketing_tab {
                    width:320px;
                    height:200px;
                    margin-right:0px;
                    float:left;
                    }

                    .tab_title {

                    width:320px;
                    background:#1f1f1f;
                    }

                    .tab_body {
                    height:158px;
                    width:320px;
                    background:#2f2e2e;
                    }

                    #left_box {
                    padding:0 40px 0 40px;
                    }

                    #right_box {
                    padding:0 40px 0 40px;
                    }

                    #quote_form {
                    margin:50px auto;
                    }

                    .testomonial_text {
                    width:760px;
                    font-size:35px;
                    line-height:35px;
                    }


            }

5 个答案:

答案 0 :(得分:1)

如果你想拉伸它使用背景大小:100%100%。如果它与原始图像不成比例,则使用'auto'中的一种尺寸 - background-image:100%auto;

答案 1 :(得分:1)

我知道你不是要求javascript修复,但这是我做的一个样本,它可以满足你的需求:

Fiddle Here

$(document).ready(function () {
    $('html').css({
        "background-size": $(window).width() + "px" + " " + $(window).height() + "px"
    });
    $('html').show();
});

$(window).resize(function () {
    $('html').css({
        "background-size": $(window).width() + "px" + " " + $(window).height() + "px"
    });
});

它会在加载时抓取屏幕大小并调整大小并调整背景以适应。

答案 2 :(得分:0)

好的,背景图片位于不在体内的div上,并且具有固定的高度。 考虑在#banner上使用宽度:100%和/或显示(块或浮动内联)

答案 3 :(得分:0)

背景图片太小而无法适应屏幕,您需要更大的图像来重复背景图像,如:

background: url(images/banner.jpg) repeat;

答案 4 :(得分:0)

您是否已尝试使用AnyStretch等响应式解决方案:https://github.com/danmillar/jquery-anystretch

发生此问题是因为设备正在尝试保留宽高比。