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