class background image not displayed in div

I am quite new to web designing and I am having issue with setting an image as background for a div. I then want add some text inside this div which then appear on top the image. I am building an angular project with of course html and css.

this is my css code. The css code is in the home.component.css


.gbimage {
height: 100%;
width: 100%;
color: #314eb8af;
}

.gbimage div {
background-image: url("/assets/img/book1.jpg");
background-repeat: no-repeat;
}

this is my HTML code. This is in the home.component.html


<!doctype html>
<html lang="en">

<body >
<div class="gbimage">
<div >
<a href="#">text number 1</a>
<a href="#">text number 2</a>
<a href="#">text number 3</a>
<a href="#">text number 4</a>
<a href="#">text number 5</a>
</div>

</div>

</body>
</html>

This is how add the css file to home.component.ts file.


@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
}

this is my project structure

inside the home folder are all the home file mentioned above. inside the assets folder are the images. The home folder is inside the app folder. the assets folder and the app folder are on the same level, inside the src folder, one level above the home folder.
​

Continue reading...