image repeating at bottom of page on mobile device

Question

hi,
on mobile version my background image is repeated at the bottom of the page when i have set background-repeat as no repeat, how to fix this problem?

Shakran Mushtaq · Answer

html, body, h1, h2, h3, h4, h5, h6, p,  a, img {
        padding: 0;
        border: 0;
        margin: 0;
    }
h1{color: #660C18;
    font-size: 35px;
    text-align: center;
    border-bottom: 4px solid white;
    margin: 50px 0px 10px 0px

}

a {text-decoration: none}
a:hover {text-decoration: underline;
        color: red; } 
ul{text-align: 
    center}

ul {margin-top: 15px}

.nav {font-size: 20px;
    margin-top: 0px;}

.nav li{display: inline;}
    body{background-color: #0A0624;}
    h1{font-family: sans-serif;
        }
        a{color: yellow}
.dis li{color: #395D33;
        font-size: 20px
    }
.dis {list-style: none;}
.dis p {font-size: 15px;
color: white;
margin-bottom: 30px;
margin-left: 50px;
margin-right: 50px;
text-align: center;}
.dis li{margin-bottom: 10px}
.nav {margin-bottom: 50px;
    }
h1 {font-family: serif;}
.dis li {border: 1px solid white;
padding-left: 15px;
}
.dis li{border: 0;}
h1 {border: 0;}
body {background-color: #000000;}
.dis h3{color: #0DFF00;}
a{color:white;}
body{padding: 0 0 0 0;}
.header{padding: 30px 30px 30px 30px;}
.main-content{ padding: 10px 10px 10px 10px; }
.header{background-color: #b56663}
.header-nav{color: gold;}
.main-content{width: 500px;
    padding: 20px;
    border: 1px solid #dddddd;
    margin: 30px auto 0 auto;
}
h1{text-align: center;}
.nav{text-align: center;}
.dis h3{text-align: center;}
.dis p{text-align: left;}
body{background-color: white;}
.dis p {color: black;}
.dis h3{color: black;}
.dis {padding: 0;
margin: 0;
border:0;}
.nav a{padding-left: auto;}
h1{border-bottom: 1px solid white; 
    padding-bottom: 5px}
body{background-color: #5f5f5f}
.main-content{background-color: #white}
.main-content{background-color: silver;}
.main-content{background: grey }
body, h1{font-family: helvetica, arial, sans-serif;}
body, h1, h2, h3, p, ul, ol ,li, img, a {
    font-size: 100%;
    font: inherit;
}
h1{font-size: 38px;
    text-align: center;
    font-weight: 500;
    font-style: italic;
    font-family: times new roman;
}
h3{font-size: 25px;
    text-align: center;
font-weight: 100;
color: purple;
text-decoration: none;
padding-bottom: 0;
margin-bottom: 0;
border: 0}
ol {color: black;
    text-align: left;   
    font-size: 25px;
    color: #0F617D;
    list-style-type: none;
    font-style: cabin; 
}
ol li ul {padding: 0;
margin: 0;
border:0;}
ul{list-style-type: none;}
p{color: red}
h1{font-family: helvetica;
color: #7D0F0F;
border-bottom: 2px solid white;
font-size: 40px;}
h3{font-family: serif;
    color: black;
    text-decoration: none;
    font-size: 30px;
    font-weight: lighter;
border-bottom: 1px solid black;
}  
li {font-size: 20px;
color: black;
}
p {font-family: monospace;
color: white ;
font-weight: 30px;
font-size: 15px;
padding-top: 10px;
padding-bottom:10px;}
.headernav { color: #001021; }
    .main-content {background:  url(images/b) center ;
background-repeat: repeat;
background-size: cover;
background: #D8EDFC;
}
.main-content p{  color: white; 
   font: bold 15px/25px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   margin-bottom: 15px;
}
h3 {font-family: monospace;
    color: white; 
   font: bold 25px/35px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background-color: purple; /* fallback color */
   }
.header {background-color: purple;
        }
body {background: url(images/info.jpeg) center;
    background-repeat: no-repeat;
background-size: cover;
}
.headernav{ color: white;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-family: times; }
h3{color: white
    ;}
p{padding-left:10px;
}
nav  {color: purple;
        background-color: purple;}
.header{background-color: white;}
.headernav {color: purple;
            }
.nav {background-color: purple;}
h1 {border-bottom:1px solid purple;
}
.logo h1 {text-align: center;
        margin: 0;
        color: purple;
        text
}
/*************************************
BACKGROUND COLOR AND PADDING
*************************************/
.header, .nav {background-color: #2D1D57;
                padding: 10px 0 0;
                border: 0;
                margin-top: 15px;
                ma}
.nav {padding: 0;
margin: 0}
h2 {background-color: #722B8E}
.header h1 {color: white;
            border-bottom: 2px solid #4E2265;
            font-style: normal;
            margin: 10px auto;
            margin-bottom: 0}
h3{background-color: #FFAE00}
.nav {background-color: #4E2265;
        padding:10px 10px;}
body{background-color: grey;
    color:white;}
.main-content {background: #F1EE00}
/*************************************
FONTS 
*************************************/
h1{ font-family: 'Roboto Condensed', sans-serif;
    font-weight: normal;
font-size: 1.75em;
line-height: 0.8em;
letter-spacing: 1px;
background-attachment: fixed;}
.nav a {font-family: 'Lato', sans-serif;
        color: #fff;
        font-weight: normal;
        font-size: 0.75em;
        margin: -5px 0 0 ;
        padding: 10px 0;
        margin: 20px 0 0;
        letter-spacing: 1px;
        background-attachment: fixed;
        }
.main-content h3 {font-family: 'Raleway', sans-serif;
                    font-weight: normal;
                    font-size: 1.75em;
                    letter-spacing: 1px;
                    }
.main-content li {font-family: 'Raleway', sans-serif;
                    font-weight: normal;
                    color: #4E2265;
                    font-size: 1.5em;
                    text-align: left;
                    letter-spacing: 1px}
footer p {font-family: 'Lato', sans-serif;
            font-weight: normal;
        font-size: 0.75em;
        text-align: center;
     }
.main-content p {font-family: 'Nunito', sans-serif;;
    color: #fff;
font-weight: lighter;
font-size: 0.75em;
letter-spacing: 2px;
color: #F1E800;
}
.main-content ul {margin-left: -50px;
                    margin-right:30px;
                }
            .main-content{background: #D6ECFC}

.main-content h3{background: black}
   footer {text-align: center;
    padding-top: 50px; 
             background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
background: #000000;
font-weight: lighter;}
body {background: url(images/back.jpeg) ;
    background-position: center center;
background-size: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Steven Parker · Answer

Just a guess, but perhaps you have a media query that is overriding your background-repeat setting on smaller screens.  Post your code or link to a workspace snapshot if that's not it.

Welcome to the Treehouse Community

Looking to learn something new?

Shakran Mushtaq

Shakran Mushtaq

image repeating at bottom of page on mobile device

Mike Constantino

Mike Constantino

Shakran Mushtaq

Shakran Mushtaq

2 Answers

Steven Parker

Steven Parker

Shakran Mushtaq

Shakran Mushtaq

Shakran Mushtaq

Shakran Mushtaq