Why isn't this setting my background image?

.background {
	background-image:url("clouds.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	overflow-y: auto;
	width: 100%;
	height: 100%;
}


<div class="background">







</div>



* {
	margin: 0;
	padding: 0;
}
body {
	width: 100%;
	height: 100%;
	font-size: 15px;
	font-weight: bold;
	
}
.background {
	background-image:url("clouds.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	overflow-y: auto;
	width: 100%;
	height: 100%;
}
.nav {
	width: 350px;
	height: auto;
	
	position: absolute;
	top: 20%;
	left: 0;
}
.nav a {
	text-decoration: none;
	font-size: 29px;
	font-famiy: Arial;
	font-weight: bold;
	height: 90px;
	display: inline-block;
	margin: 5px 0;
	float: left;
	background-color: black;
	color: white;
	line-height: 90px;
	text-align: center;
	transition: 200ms;
}

a.active {
	background-color: white;
	color: black;
}
a.active, .nav a:hover {
	background-color: white;
	color: black;
	width: 100%;
}
.contact {
	width: 95%;
}
.about {
	width: 80%;
}
.projects {
	width: 80%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Victor K. Portoflio Page</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="style.css" type="text/css">
   
  </head>
<body>

<div class="background">

<div class="nav">
	<a class="home" active href="#">HOME</a>
	<a class="contact" href="#">CONTACT ME</a>
	<a class="projects" href="#">PROJECTS</a>
</div>




</div>
















</body>
</html>

Hi,
you don’t see the image because the url’s not good.
I think it miss something,
Where is your image ?
You have to give the way to the url to get the image

:sourire:

are you using the style tag if your css is on the same page as your html.

if not the browser will not recognize it.
and as the other post said for that to work the image would have to be in the same folder as your html file.

I might be wrong because I am new at this but that is my line of thinking based on the code posted although it seems the style tags are not displayed within post

Good luck

I have hte picture in the asme folder as the html file

Can you show your code?

Yeah I edited main post

I don’t think it is your path.

Try changing the height units to vh

1 Like

Does your nav show up?

I can’t say anything about your local files and where they are but looking at your code I don’t think anything has any height. So everything is collapsed. Try this:

body {
    position: relative;
    width: 100vw;
    height: 100vh;
}

Ah, I see that @alhazen1 also suggested this!

Nothing shows up. Someone please help me