Question

I have an html that look like this:

<ul>
  <li>
    <img src="<?php echo base_url();?>assets/images/blue_background.png" class ="menu-bg"/>
    <a href="#" class="menu-portal"></a>
  </li>
  <li>
    <img src="<?php echo base_url();?>assets/images/blue_background.png" class ="menu-bg"/>
    <a href="#" class="menu-tags"></a>
  </li>
  <li>
    <img src="<?php echo base_url();?>assets/images/blue_background.png" class ="menu-bg"/>
    <a href="#" class="menu-requests"></a>
  </li>
  <li>
    <img src="<?php echo base_url();?>assets/images/blue_background.png" class ="menu-bg"/>
    <a href="#" class="menu-videos"></a>
  </li>
</ul>

As you can see the code above I kept repeating my blue background which in element img. Can anyone help me shorten this up. For example if I can insert the img in my li element, that would do.

Any help will be great.

Answer 1

Use it as a background, instead a defining a separate image tag.

ul li { 
   background-image: url("assets/images/blue_background.png");
   height: 30px; /* height of the image */
   width: 30px; /* width of the image if the size is fixed */
}