March 8, 2012
css tricks to shorten my redundant code
Question by Wondering Coder
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 by Starx
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 */
}
