Fatal编程技术网

Javascript CSS3背景不重复

javascript html css

Javascript CSS3背景不重复,javascript,html,css,Javascript,Html,Css,我的问题是，无论我做什么，背景“backgroundmain.png”都不会重复。。。我已经尝试添加更多的div来包含身体中的所有内容，但仍然没有运气。。。我需要“backgroundmain.png”完全重复以覆盖页面底部的内容 另外，我觉得这可能是一个问题与所有的div正在使用，我只是不能针点它，所以我要求一套新的眼睛 HTML: #back上的背景正在重复，但没有显示，因为该元素的高度为0px。它的高度是0px，因为它的子对象处于绝对位置。如果将高度指定给#back，则可以看到它正在重复。

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

另外，我觉得这可能是一个问题与所有的div正在使用，我只是不能针点它，所以我要求一套新的眼睛

HTML:

#back
上的背景正在重复，但没有显示，因为该元素的高度为0px。它的高度是0px，因为它的子对象处于绝对位置。如果将高度指定给
#back
，则可以看到它正在重复。解决方案是为
#back
指定一个高度，或者修改布局以重新定位内容，使其保持页面布局，并为
#back
提供非零高度

正文{
身高：100%；
宽度：100%；
字体系列：“开放式Sans”，无衬线；
背景图片：url（“images/background.jpg”）；
背景重复：无重复；
背景附件：固定；
}
#背{
背景图像：url（“http://www.w3schools.com/css/img_fjords.jpg");
背景重复：重复-y；
最小高度：500vh；
}
/*导航栏*/
导航{
排名：0；
边缘顶部：48px；
文本对齐：居中；
}
保险商实验室{
z指数：1；
边缘顶部：20px；
列表样式类型：无；
保证金：0；
填充：0；
宽度：100%；
身高：5%；
位置：固定；
背景色：#333；
排名：0；
}
李{
浮动：左；
}
李阿{
显示：块；
填充：14px 16px；
颜色：白色；
文本对齐：居中；
文字装饰：无；
}
李娜：停下来{
背景色：白色；
颜色：黑色；
字体大小：125%；
}
/*末端导航*/
/*身体信息*/
梅因先生{
位置：绝对位置；
排名：0；
背景图片：url（“images/backgroundmain.png”）；
背景重复：重复-y；
最小高度：100%；
左边距：15%；
边缘顶部：48px；
宽度：70%；
身高：100%；
}
/*当地天气*/
.本地天气{
框大小：边框框；
位置：相对位置；
排名：0；
边缘顶部：20px；
左边距：40px；
身高：50%；
宽度：20%；
背景图片：url（“images/weatherphoto.png”）；
背景尺寸：封面；
背景重复：无重复；
文本对齐：居中；
垫面：12%；
}
#zipcode{
字体系列：“开放式SAN”；
字号：800；
字体：斜体；
}
输入[类型=编号]：-webkit外部旋转按钮，
输入[类型=编号]：-webkit内部旋转按钮{
-webkit外观：无；
保证金：0；
}
输入[类型=数字]{
-moz外观：textfield；
}
/*时事通讯*/
.通讯{
位置：绝对位置；
背景颜色：灰色；
身高：50%；
宽度：50%；
左：26%；
最高：2%；
}
/*推特提要*/
.饲料{
位置：绝对位置；
身高：85%；
宽度：20%；
左：78%；
最高：2%；
}
/*7天预测*/
weekweather先生{
背景图片：url（“images/week.png”）；
背景重复：无重复；
宽度：75%；
身高：29%；
位置：绝对位置；
最高：55%；
左：3%；
文本对齐：居中；
垫面：5%；
字号：800；
字体：斜体；
}
/*雷达图*/
.雷达{
背景图片：url（“images/backgroundmain.png”）；
位置：绝对位置；
左：5%；
最高：90%；
}
.雷达图像{
身高：100%；
宽度：100%；
}

梅特罗普

    

  • 

  • 

  • 

  • 

  • 

  • 



请输入您的邮政编码以查看今天的当地天气






请在上面输入您的邮政编码以查看准确的7天预测
背景在
#back
上重复，但没有显示，因为该元素的高度为0px。它的高度是0px，因为它的子对象处于绝对位置。如果将高度指定给
#back
，则可以看到它正在重复。解决方案是为
#back
指定一个高度，或者修改布局以重新定位内容，使其保持页面布局，并为
#back
提供非零高度

正文{
身高：100%；
宽度：100%；
字体系列：“开放式Sans”，无衬线；
背景图片：url（“images/background.jpg”）；
背景重复：无重复；
背景附件：固定；
}
#背{
背景图像：url（“http://www.w3schools.com/css/img_fjords.jpg");
背景重复：重复-y；
最小高度：500vh；
}
/*导航栏*/
导航{
排名：0；
边缘顶部：48px；
文本对齐：居中；
}
保险商实验室{
z指数：1；
边缘顶部：20px；
列表样式类型：无；
保证金：0；
填充：0；
宽度：100%；
身高：5%；
位置：固定；
背景色：#333；
排名：0；
}
李{
浮动：左；
}
李阿{
显示：块；
填充：14px 16px；
颜色：白色；
文本对齐：居中；
文字装饰：无；
}
李娜：停下来{
背景色：白色；
颜色：黑色；
字体大小：125%；
}
/*末端导航*/
/*身体信息*/
梅因先生{
位置：绝对位置；
排名：0；
背景图片：url（“images/backgroundmain.png”）；
背景重复：重复-y；
最小高度：100%；
左边距：15%；
边缘顶部：48px；
宽度：70%；
身高：100%；
}
/*当地天气*/
.本地天气{
框大小：边框框；
位置：相对位置；
排名：0；
边缘顶部：20px；
左边距：40px；
身高：50%；
宽度：20%；
背景图片：url（“images/weatherphoto.png”）；
背景尺寸：封面；
背景重复：no-r

<!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>



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%;
}