Why is my background repeating?

Question

Im learning how to build a website, but I have some trouble because of the background.

The background is repeating when I add content to the div container. Why is that, and how can I fix it?

.body {
    background: url("imgs/background.jpeg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.main{
   background-color:rgba(255,255,255,0.9) ;
margin:25px;

}

.container{

   width:63%;
    height:auto;
    background-color:rgba(255,255,255,0.9);
    float:left;
 box-shadow: 1px 1px 1px #000, 
               3px 3px 5px grey; 
    font-family: 'Orbitron', sans-serif;
    text-shadow: 1px 1px 1px #000, 
               3px 3px 5px grey; 
    margin-bottom: 30px;

}

your CSS won't work: `background-image` just accepts a URL, no other parameters. Use the `background` short form instead — Johannes, May 15 '18 at 21:57

score 0 · Answer 1 · answered May 15 '18 at 21:55

0

Add background-repeat: no-repeat; on body

for more info on background-images read the link https://www.w3schools.com/cssref/pr_background-image.asp

answered May 15 '18 at 21:55

Nandita Sharma

13,287
2
22
35

score 0 · Accepted Answer · answered May 15 '18 at 21:57

0

You're using the shorthand syntax with the background-image property, that's wrong. You need the background property for that:

.body {
    background : url("imgs/background.jpeg") no-repeat center center fixed;
}

answered May 15 '18 at 21:57

Amr Noman

2,597
13
24

Why is my background repeating?

2 Answers2