Creative text within background image

1

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.

2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

3

thank you for this! I didn’t know it.

1 Like
5

Really? Oh, then I will change it. Do you know any website that provides HD images that can work as background images in webpages?
Thank you.

6

https://cubeupload.com might work, but I haven’t tried it.