Hi! I would like to know how to write creative text inside my background image.
It’s the personal portfolio webpage. I created a transparent navigation bar and now I want to write about me. contact details, etc. in many places inside the image. For example I have a lamp in the middle of the image and I want write little texts around the lamp.
This is what I did so far:
HTML:
<body>
<div class="nav">
<ul>
<li> <a href="#">About</a></li>
<li> <a href="#">Portfolio</a></li>
<li> <a href="#">Contact</a></li>
</ul>
</div>
</body>
CSS:
body {
margin: 0;
background: url('https://cdn.pixabay.com/photo/2017/05/05/17/21/bulb-2287759_960_720.jpg');
background-size:cover;
}
.nav {
width: 100%;
background: #grey;
height: 100px;
margin-top: 5px;
opacity:0.4;
}
ul{
list-style:none;
padding:0;
margin:0;
position:absolute;
}
li{
float:left;
margin-top:30px;
}
a{
width:150px;
color:white;
display:block;
text-decoration:none;
font-size:17px;
text-align:center;
padding:10px;
border-radius:10px;
font-family:Century Gothic;
font-weight:bold;
}
a:hover{
background:#abc;
}
Thank you in advance.