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.
these are my css and html code snippet
.gbimage {
height: 100%;
width: 100%;
color: #314eb8af;
}
.gbimage div {
background-image: url("/assets/img/book1.jpg");
background-repeat: no-repeat;
}<!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.
2
As question includes several points I will try to tackle them all:
I am having issue with setting an image as background for a div
In order to display the image as background, you need to ensure that the div takes up space. Currently, the inner div where the background image is applied does not have a specified height or width, which means it might not be visible. You need to ensure that this div is given a size to display the background image.
I then want add some text inside this div which then appear on top the image
You need to check the positioning the text on top of the image. By default, the text might appear below the image or outside the image area. To ensure the text is positioned on top of the image, we can use relative or absolute positioning.
The code snippet:
.gbimage {
height: 100%;
width: 100%;
position: relative;
color: #fff;
}
.gbimage div {
height: 500px;
width: 100%;
background-image: url("https://img.freepik.com/free-photo/sports-car-driving-asphalt-road-night-generative-ai_188544-8052.jpg");
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.gbimage div a {
margin: 0 10px;
color: #ffffff;
font-size: 18px;
text-decoration: none;
}<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>As your folder structure is like:
src/
├── app/
│ ├── home/
│ │ ├── home.component.ts
│ │ ├── home.component.html
│ │ ├── home.component.css
├── assets/
│ ├── img/
│ │ ├── book1.jpg
it might already work, but even not, you need to ensure that Angular is picking up the image correctly. Angular uses the /assets/ folder by default for serving static assets. The path /assets/img/book1.jpg should work correctly, but double-check the image name and folder structure to make sure it’s accurate.