How do I make the background image cover the entire background without the image repeating and the n-CodePudding

body{
display: flex;
background: url("images/benzo.jpg") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: contain;
background-attachment: fixed;

} This is the code sample where I inserted the background image

CodePudding user response：

background-size: cover is what you want to cover the entire page with your image:

body{
display: flex;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: cover;
background-attachment: fixed;

Regarding your nav bar, I'm not entirely sure how you have your HTML set up, but you could do something along these lines. It's not pretty, so don't judge me lol.

Essentially, you could just put your <a> tags in a div and then set the text-align property for said div to right. See below:

body {
  display: flex;
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png")
    no-repeat center;
  color: #fff;
  background-size: cover;
  background-attachment: fixed;
}
div.nav{
  background: #fff;
  width: 100%;
}
div.links{
  text-align: right;
}
.a-color {
  color: #007bff;
  text-decoration: none;
  display: inline-block;
  font-size: 2vw;
  padding: 15px;
  overflow: hidden;
  word-spacing: -2px;
  letter-spacing: 4px;
  cursor: pointer;
  transition: .2s;
}

.a-color:hover{
  color: darkblue;
}

<div >
  <div >
  <a >TEXT</a>
  <a >TEXT</a>
  <a >TEXT</a>
  <a >TEXT</a>
  </div>
</div>

CodePudding user response：

body {
  display: flex;
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png")
    no-repeat center;
  color: #fff;
  margin:0px;
  background-size: cover;
  background-attachment: fixed;
}
div.nav{
  background: #fff;
  width: 100%;
}
div.links{
  text-align: right;
}
.a-color {
  color: #007bff;
  text-decoration: none;
  display: inline-block;
  font-size: 2vw;
  padding: 15px;
  overflow: hidden;
  word-spacing: -2px;
  letter-spacing: 4px;
  cursor: pointer;
  transition: .2s;
}

.a-color:hover{
  color: darkblue;
}

<div >
  <div >
  <a >TEXT</a>
  <a >TEXT</a>
  <a >TEXT</a>
  <a >TEXT</a>
  </div>
</div>

Try using cover instead of contain for the background image. As cover will scale the image to fill its containers width and height see: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size As far as placing the nav link in the top right without seeing your HTML I can't suggest anything other than using position absolute to place it there.

EDIT: Added snippet. So I removed the margin from the body assuming that is what you meant by the spacing. I would look into using a css reset like normalize to fix that across browsers.