In my css i've given url() of img but it is not working as background img when code is executed on browser. My HTML is stored in htdocs->ALUMEET->profile.html My CSS is stored in htdocs->ALUMEET->CSS->profile.css My image is stored in htdocs->ALUMEET->images->help2.jpg XAMPP is used
html:
<!DOCTYPE HTML>
<html>
<head>
<title>Profile</title>
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<link rel="stylesheet" href="CSS/profile.css">
</head>
<body>
<div class="container">
<div class="profilebox">
<i class="uil uil-bars icon"></i>
<i class="uil uil-setting icon"></i>
<img src="images/profilepic.jpg" class="profile-pic">
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', 'sans-serif';
}
.container {
width: 100%;
height: 100vh;
background: url('/images/help2.jpg');
}
.profilebox {
background: pink;
text-align: center;
}
I'm expecting background-image to work also i've used iconify for icons by giving link in idk how to give it tho(i did it by watching yt). tell me how to do it and i've used unicons, is there naything else that can be used? how?
Try this
If you want to use Iconify. Add this to HTML head
Then add icons to where you want like this.