CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-lists
user3731426
user3731426

Reputation: 43

list with a expandable image background

im new developing in html and css and im having a problem trying to achieve a list with a background image that adapt to the quantity of elements that the list have and change its height respect to the list items. I share an example here, the idea is to set the list below "Menu" and the rest of the image change respect the elements in the list. Thanks.

<ul>
  <img src="https://st.depositphotos.com/1695098/1207/i/950/depositphotos_12070017-stock-photo-menu-background.jpg">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Upvotes: 0

Views: 138

Answers (3)

dippas
dippas

Reputation: 60573

your html markup is invalid, a ul can only contain as direct children the li element.

Then to achieve what you want you need to set background-image in ul

ul {
  background-image: url(https://st.depositphotos.com/1695098/1207/i/950/depositphotos_12070017-stock-photo-menu-background.jpg)
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Upvotes: 2

user3362120
user3362120

Reputation: 1

Don't forget the style tags:

<style>
ul {
background-image: url(https://st.depositphotos.com/1695098/1207/i/950/depositphotos_12070017-stock-photo-menu-background.jpg)
}
</style>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Upvotes: -1

tim_stuff
tim_stuff

Reputation: 143

I think that, in order to achieve the result you're looking for, you will want to place both the image and the inside a div with a position of relative. Then make the image the main element that defines the size of the div and position the absolutely where you want it.

Observe the code below. You will likely want to run it in full-page mode. It will center the text and the image. The top property on the menu class will dictate how far from the top your text is.

.menuContainer {
  position: relative;
}

.menuContainer img {
 width: 1000px;
 margin: 0 auto;
 display: block;
}

.menu {
  position: absolute;
  width: 100%;
  top: 250px;
  text-align: center;
  list-style: none;
}
<div class="menuContainer">
  <img src="https://st.depositphotos.com/1695098/1207/i/950/depositphotos_12070017-stock-photo-menu-background.jpg">
  <ul class="menu">
    <li>Steak</li>
    <li>Chicken</li>
    <li>Macaroni and Cheese</li>
    <li>Mashed Potatoes</li>
    <li>Chocolate Mousse</li>
  </ul>
</div>

Upvotes: 0

Related Questions