Question 413545 in Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to add a background image to each list item in a list?

I’m building another website and the background is a watercolor type painting and I wanted to make it where every nav button had an image of a watercolor splatter behind it. I’ve been trying to figure it out but nothing has worked.
Here is my current attempt but nothing I’ve tried has worked yet:

nav {
  display: flex;
  padding: 2% 6%;
  justify-content: space-between;
  align-items: right;
}

.nav-links {
  flex: 1;
  text-align: right;
}

.nav-links ul {}

.nav-links ul li a {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.nav-links ul li {
  list-style: none;
  display: inline-block;
  padding: 8px 12px;
  position: relative;
  background-image: url(https://assets.onecompiler.app/42tzva7s5/42wnuqh5j/water%20drop.png);
  background-position: relative;
}
<nav>
  <div class="nav-links">
    <ul>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
    </ul>
  </div>
</nav>
Tags:

3

Answers


  1. 0

    Give this CSS a shot:

    nav {
  display: flex;
  padding: 2% 6%;
  justify-content: flex-end;
  align-items: center;
}

.nav-links {
  flex: 1;
  text-align: right;
}

.nav-links ul {
  padding: 0;
  margin: 0;
}

.nav-links ul li {
  list-style: none;
  display: inline-block;
  padding: 8px 12px;
  position: relative;
}

.nav-links ul li a {
  color: black;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  /* Required for the pseudo-element */
  z-index: 1;
  /* Make sure the link text is on top */
}


/* Add a pseudo-element for the watercolor background */

.nav-links ul li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('https://assets.onecompiler.app/42tzva7s5/42wnuqh5j/water%20drop.png');
  background-size: contain;
  /* Adjust as needed */
  background-repeat: no-repeat;
  z-index: 0;
  /* Make sure this is behind the link text */
}
    <nav>
  <div class="nav-links">
    <ul>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
    </ul>
  </div>
</nav>

    Using a pseudo-element (::before in this case) is a good way to add custom elements to each item in a list, or every child div

    Login or Signup to reply.
  2. 0

    This property should work in any element. Looks like the only thing missing is the url enclosed in quotes.

    background-image: url("https://assets.onecompiler.app/42tzva7s5/42wnuqh5j/water%20drop.png");
    Login or Signup to reply.
  3. 0

    I hope the following code snippet is your desired result. You might want to change the background-size property to either cover or contain, depending on your preference. The snippet here uses contain.

    nav{
  display: flex;
  padding: 2% 6%;
  justify-content: space-between;
  align-items: right;
}

.nav-links{
  flex: 1;
  text-align: right;
}
.nav-links ul li a{
  color: black;
  text-decoration: none;
  cursor: pointer;
}
li{
  list-style: none;
  display: inline-block;
  padding: 8px 12px;
  background-image: url(https://assets.onecompiler.app/42tzva7s5/42wnuqh5j/water%20drop.png);
  background-size: contain; /* u could change this to cover too */
  background-position: center; 
  background-repeat: no-repeat;
}
      <nav>
    <div class="nav-links">
    <ul>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
    </ul>
    </div>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search