背景图片大小

时间：2014-08-04 16:59:15

标签： html css browser

我正在做一个带有背景图片的网页，当网页处于整页模式时，该网站显示正常。但是当我开始重新调整浏览器大小时，导航保持不变，但背景图像变得太小而且有不需要的空白区域。 我可以做什么，以便在重新调整大小时，背景图像符合浏览器的大小？ 谢谢大家的帮助。 ：）

<html>
<link rel="stylesheet" type="text/css" href="C:\Users\tom\Desktop\CSS\Mark & Howie Wedding/itinary.css">
<meta name="viewport" content="width=device-width">
    <head>
        <body>
            <div class="wrapper">
                <ul class="nav">
                    <li class="home"><a href="#">Home</a></li>
                    <li class="location"><a href="#">Location</a></li>
                    <li class="itinerary"><a href="#">Itinerary</a></li>
                    <li class="photos"><a href="#">Howie & Mark</a></li>
                </ul>
            </div>
        <div class="card">
            <div class="sign">
                <ul class="mark">
                    <li>Howard & Mark's wedding beings</li><br>
                    <li>We start dancing</li><br>
                    <li>Everybody has fun</li>
                </ul>
            </div>
        </div>
        </body>
    </head>
</html>

body {
background-image: url("http://i.istockimg.com/file_thumbview_approve/20453608/2/stock-photo-20453608-wedding-sign.jpg");
background-repeat: no-repeat;);
background-repeat: no-repeat;
background-size: cover;
}
.wrapper {
    top: 10px;
    height: 175px;
    width: 1100px;  
    background-color: black;
    opacity: 0.8;
    margin: auto;
    border-radius: 10px;
    z-index: 0;

}
.card {
    display: inline-block;
    width: 700px;
    height: 350px;
    margin: 40px;
    background-color: white;
    border-radius: 20px;
    text-align: center;
}
.sign {
    margin: 35px;
    width: 617px;
    height: 267px;
    border: solid black;
    border-radius: 5px;
    font-style: oblique;
    font-weight: 600;
    text-align: center;
}
.mark {
    font-size: 35px;
    list-style-type: none;
}
ul.nav {
    display: inline;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 8px 15px;
    border-radius: 5px;
    text-align: auto;
}
ul.nav li {
    float: left;
    margin-left: 50px;
}

ul.nav li.home {
    padding: 35px 15px;
    margin: 20px;
    top: 15px;
    font-weight: 100;
    height: 55px;
    width: 130px;
    font-size: 40px;
}
ul.nav li.home:hover {
        background-color: #138f00;
        border-radius: 8px;
}
ul.nav li.location {
    padding: 35px 15px;
    margin: 20px;
    font-weight: 100;
    top: 15px;
    height: 55px;
    width: 180px;
    border-radius: 5px;
    font-size: 40px;

}
ul.nav li.location:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li.itinerary {
    padding: 35px 15px;
    margin: 20px;
    font-weight: 100;
    height: 55px;
    width: 200px;
    border-radius: 5px;
    font-size: 40px;
}
ul.nav li.itinerary:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li.photos {
    padding: 35px 15px;
    margin: 20px;
    margin-left: 40px;
    font-weight: 120;
    height: 55px;
    width: 250px;
    border-radius: 5px;
    font-size: 40px;
}
ul.nav li.photos:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li a {
    color: #faf3bc;
    display: block;
    text-decoration: none;
}

3 个答案:

答案 0 :(得分：1)

添加：

html, body{
  height:100%;
}

您还应删除重复的css元素：background-repeat: no-repeat;);

以下是一个有效的例子：http://jsfiddle.net/LKrhJ/1/

答案 1 :(得分：0)

不知道Css在某个时候是如此难以预料但是这个怎么样？也许就像将图像放在div中并在图像上放置唯一的类并将该类设置为：

#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}

OR 
.uniqueClass{
width: 100%;
position: absolute;
top: 0;
left: 0;

}

参考 - http://css-tricks.com/how-to-resizeable-background-image/

答案 2 :(得分：0)

试试这段代码：

请注意，您的<HEAD>标记位置错误，必须在<BODY>之前。

如果您更喜欢在不同的文件中使用CSS，并使用<LINK>标记。

<html>
    <head>
<link rel="stylesheet" type="text/css" href="C:\Users\tom\Desktop\CSS\Mark & Howie Wedding/itinary.css">
<meta name="viewport" content="width=device-width">

    <style>
        img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 253px;

        /* Set up proportionate scaling */
        width: 100%;
        height: auto;

        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1; // set it behind other stuffs
    }

.wrapper {
    top: 10px;
    height: 175px;
    width: 1100px;  
    background-color: black;
    opacity: 0.8;
    margin: auto;
    border-radius: 10px;
    z-index: 0;

}
.card {
    display: inline-block;
    width: 700px;
    height: 350px;
    margin: 40px;
    background-color: white;
    border-radius: 20px;
    text-align: center;
}
.sign {
    margin: 35px;
    width: 617px;
    height: 267px;
    border: solid black;
    border-radius: 5px;
    font-style: oblique;
    font-weight: 600;
    text-align: center;
}
.mark {
    font-size: 35px;
    list-style-type: none;
}
ul.nav {
    display: inline;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 8px 15px;
    border-radius: 5px;
    text-align: auto;
}
ul.nav li {
    float: left;
    margin-left: 50px;
}

ul.nav li.home {
    padding: 35px 15px;
    margin: 20px;
    top: 15px;
    font-weight: 100;
    height: 55px;
    width: 130px;
    font-size: 40px;
}
ul.nav li.home:hover {
        background-color: #138f00;
        border-radius: 8px;
}
ul.nav li.location {
    padding: 35px 15px;
    margin: 20px;
    font-weight: 100;
    top: 15px;
    height: 55px;
    width: 180px;
    border-radius: 5px;
    font-size: 40px;

}
ul.nav li.location:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li.itinerary {
    padding: 35px 15px;
    margin: 20px;
    font-weight: 100;
    height: 55px;
    width: 200px;
    border-radius: 5px;
    font-size: 40px;
}
ul.nav li.itinerary:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li.photos {
    padding: 35px 15px;
    margin: 20px;
    margin-left: 40px;
    font-weight: 120;
    height: 55px;
    width: 250px;
    border-radius: 5px;
    font-size: 40px;
}
ul.nav li.photos:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li a {
    color: #faf3bc;
    display: block;
    text-decoration: none;
}
    </style>
        </head>
        <body>
        <img src="http://i.istockimg.com/file_thumbview_approve/20453608/2/stock-photo-20453608-wedding-sign.jpg" class="bg" />
            <div class="wrapper">
                <ul class="nav">
                    <li class="home"><a href="#">Home</a></li>
                    <li class="location"><a href="#">Location</a></li>
                    <li class="itinerary"><a href="#">Itinerary</a></li>
                    <li class="photos"><a href="#">Howie & Mark</a></li>
                </ul>
            </div>
        <div class="card">
            <div class="sign">
                <ul class="mark">
                    <li>Howard & Mark's wedding beings</li><br>
                    <li>We start dancing</li><br>
                    <li>Everybody has fun</li>
                </ul>
            </div>
        </div>
        </body>

</html>
相关问题
最新问题