小贝子编程

CSS3 背景不重复



我的问题是无论我做什么，背景"backgroundmain.png"都不会重复......我尝试添加更多div来包含体内的所有内容，但仍然没有运气......我需要"backgroundmain.png"完全重复以覆盖页面底部的内容。

附言我觉得这可能是所有使用的div的问题，我只是无法确定它，所以我要求一双新的眼睛。

.HTML：

<!DOCTYPE html>
<html>
<head>
    <title>MetLoop</title>
    <link rel="stylesheet" type="text/css" href="defaults.css">
    <link rel="stylesheet" type="text/css" href="css.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800,800i" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="expires" content="-1" />
</head>

<body>
<!--Last Updated 1/14/17-->
<div id="back">
<nav class="header">
    <ul>
        <li style="margin-left: 15%"><a href="index.html">Home</a></li>
        <li><a href="#contact">Contact Us</a></li>
        <li><a href="#Services">Our Service</a></li>
        <li><a href="#Map">Interactive Weather Map</a></li>
        <li style="float:right; margin-right: 15%"><a href="#Login">Log In</a></li>
        <li style="float:right;"><a href="#Signup">Sign Up</a></li>
    </ul>
</nav>
<div class="background">
    <div class="main">

        <!-- LOCAL WEATHER -->
        <div class="localweather">
            <p id="zipcode">Please enter your zip code to view today's local weather</p>
            <br>
            <form>
                <input type="number" name="Zip Code"> <br> <br>
                <input type="submit" value="Submit">
            </form>

        </div>  
    <!-- VIDEO NEWSLETTER -->
        <div class="newsletter">
            <iframe width="100%" height="100%" src="https://www.youtube.com/embed/mXkPhOh5kKQ" frameborder="0" allowfullscreen></iframe>
        </div>

    <!-- TWITTER FEED -->
        <div class="feed">
            <a class="twitter-timeline" data-width="300" data-height="814" data-theme="dark" data-link-color="#2B7BB9" href="https://twitter.com/MetLoop">Tweets by MetLoop</a>
        </div>
    <!-- 7 DAY FORECAST -->
        <div class="weekweather">
            <p>Please enter your zip code above to view an accurate 7 day forecast</p>

        </div>
        <!-- LIVE RADAR MAP -->
        <div class="radar">
            <img src="images/usaweather.gif">

        </div>

    </div>
</div>



</body>
<meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="expires" content="-1" />
</html>
================================================================================================================================================================================================================================================

==

.CSS：

body {
    height: 100%;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#back {
    background-image: url("images/backgroundmain.png");
    background-repeat: repeat-y;
}
/*Navigation Bar*/
nav {
    top: 0;
    margin-top: 48px;
    text-align: center;
}
ul {
    z-index: 1;
    margin-top: 20px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 5%;
    position: fixed;
    background-color: #333;
    top: 0;
}

li {
    float: left;
}
li a {
    display: block;
    padding: 14px 16px;
    color: white;
    text-align: center;
    text-decoration: none;
}
li a:hover {
    background-color: white;
    color: black;
    font-size: 125%;
    }
/*END NAV*/
/*Body Info*/
.main {
    position: absolute;
    top: 0;
    background-image: url("images/backgroundmain.png");
    background-repeat: repeat-y;
    min-height: 100%;
    margin-left: 15%;
    margin-top: 48px;
    width: 70%;
    height: 100%;
}
/*Local Weather*/
.localweather {
    box-sizing: border-box;
    position: relative;
    top: 0;
    margin-top: 20px;
    margin-left: 40px;
    height: 50%;
    width: 20%;
    background-image: url("images/weatherphoto.png");
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 12%;
}
#zipcode {
    font-family: 'Open Sans'; 
    font-weight: 800;
    font-style: italic;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
}
/*NEWSLETTER*/
.newsletter {
    position: absolute;
    background-color: grey;
    height: 50%;
    width: 50%;
    left: 26%;
    top: 2%;
}
/*TWITTER FEED*/
.feed {
    position: absolute;
    height: 85%;
    width: 20%;
    left: 78%;
    top: 2%;
}
/*7 DAY FORECAST*/
.weekweather {
    background-image: url("images/week.png");
    background-repeat: no-repeat;
    width: 75%;
    height: 29%;
    position: absolute;
    top: 55%;
    left: 3%;
    text-align: center;
    padding-top: 5%;
    font-weight: 800;
    font-style: italic;
}
/*RADAR MAP*/
.radar {
    background-image: url("images/backgroundmain.png");
    position: absolute;
    left: 5%;
    top: 90%;
}
.radar img {
    height: 100%;
    width: 100%;
}

#back 的背景重复，但没有显示，因为该元素的高度为 0px。它是0px高度，因为它的子项的绝对定位。如果为 #back 指定高度，则可以看到它正在重复。解决方案是为#back分配一个高度，或者重新设计布局以重新定位内容，以便它们保持页面上的布局并为#back提供非零高度。

body {
    height: 100%;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#back {
    background-image: url("http://www.w3schools.com/css/img_fjords.jpg");
    background-repeat: repeat-y;
  min-height: 500vh;
}
/*Navigation Bar*/
nav {
    top: 0;
    margin-top: 48px;
    text-align: center;
}
ul {
    z-index: 1;
    margin-top: 20px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 5%;
    position: fixed;
    background-color: #333;
    top: 0;
}
li {
    float: left;
}
li a {
    display: block;
    padding: 14px 16px;
    color: white;
    text-align: center;
    text-decoration: none;
}
li a:hover {
    background-color: white;
    color: black;
    font-size: 125%;
    }
/*END NAV*/
/*Body Info*/
.main {
    position: absolute;
    top: 0;
    background-image: url("images/backgroundmain.png");
    background-repeat: repeat-y;
    min-height: 100%;
    margin-left: 15%;
    margin-top: 48px;
    width: 70%;
    height: 100%;
}
/*Local Weather*/
.localweather {
    box-sizing: border-box;
    position: relative;
    top: 0;
    margin-top: 20px;
    margin-left: 40px;
    height: 50%;
    width: 20%;
    background-image: url("images/weatherphoto.png");
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 12%;
}
#zipcode {
    font-family: 'Open Sans'; 
    font-weight: 800;
    font-style: italic;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
}
/*NEWSLETTER*/
.newsletter {
    position: absolute;
    background-color: grey;
    height: 50%;
    width: 50%;
    left: 26%;
    top: 2%;
}
/*TWITTER FEED*/
.feed {
    position: absolute;
    height: 85%;
    width: 20%;
    left: 78%;
    top: 2%;
}
/*7 DAY FORECAST*/
.weekweather {
    background-image: url("images/week.png");
    background-repeat: no-repeat;
    width: 75%;
    height: 29%;
    position: absolute;
    top: 55%;
    left: 3%;
    text-align: center;
    padding-top: 5%;
    font-weight: 800;
    font-style: italic;
}
/*RADAR MAP*/
.radar {
    background-image: url("images/backgroundmain.png");
    position: absolute;
    left: 5%;
    top: 90%;
}
.radar img {
    height: 100%;
    width: 100%;
}
<html>
<head>
    <title>MetLoop</title>
    <link rel="stylesheet" type="text/css" href="defaults.css">
    <link rel="stylesheet" type="text/css" href="css.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800,800i" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="expires" content="-1" />
</head>
<body>
<!--Last Updated 1/14/17-->
<div id="back">
<nav class="header">
    <ul>
        <li style="margin-left: 15%"><a href="index.html">Home</a></li>
        <li><a href="#contact">Contact Us</a></li>
        <li><a href="#Services">Our Service</a></li>
        <li><a href="#Map">Interactive Weather Map</a></li>
        <li style="float:right; margin-right: 15%"><a href="#Login">Log In</a></li>
        <li style="float:right;"><a href="#Signup">Sign Up</a></li>
    </ul>
</nav>
<div class="background">
    <div class="main">
        <!-- LOCAL WEATHER -->
        <div class="localweather">
            <p id="zipcode">Please enter your zip code to view today's local weather</p>
            <br>
            <form>
                <input type="number" name="Zip Code"> <br> <br>
                <input type="submit" value="Submit">
            </form>
        </div>  
    <!-- VIDEO NEWSLETTER -->
        <div class="newsletter">
            <iframe width="100%" height="100%" src="https://www.youtube.com/embed/mXkPhOh5kKQ" frameborder="0" allowfullscreen></iframe>
        </div>
    <!-- TWITTER FEED -->
        <div class="feed">
            <a class="twitter-timeline" data-width="300" data-height="814" data-theme="dark" data-link-color="#2B7BB9" href="https://twitter.com/MetLoop">Tweets by MetLoop</a>
        </div>
    <!-- 7 DAY FORECAST -->
        <div class="weekweather">
            <p>Please enter your zip code above to view an accurate 7 day forecast</p>
        </div>
        <!-- LIVE RADAR MAP -->
        <div class="radar">
            <img src="images/usaweather.gif">
        </div>
    </div>
</div>

</body>
<meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="expires" content="-1" />
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium