Background image for li using CSS

Last Reply one year ago By dharmendr

Posted one year ago

In dubaiexporters.com,in exhibitions,background image is not coming for Add your event. dubaiexporters.com

                                        <div id="tabsE">
                                            <ul id="navigation">
                                                <li><a id="link1" href="Default.aspx" title="Home"><span>Home</span></a></li>
                                                <li><a id="link3" href="advertize.aspx" title="Advertise"><span>Advertise</span></a></li>
                                                <li><a id="link4" href="exhibition.aspx" title="Exhibitions"><span>Exhibitions</span></a>
                                                    <ul>
                                                        <li><a id="A2" href="dubaiexhibitions.aspx" title="Trade fairs in U.A.E">Trade fairs
                                                            in U.A.E</a></li>
                                                        <li><a id="A1" href="exhibition.aspx" title="Trade fairs worldwide">Trade fairs worldwide</a></li>
                                                        <li><a id="A5" href="addexhibition.aspx" title="Add Your Event">Add Your Event</a></li>
                                                    </ul>
                                                </li>
                                                <li><a id="link6" href="subscribe.aspx" title="Subscribe"><span>Subscribe</span></a></li>
                                                <li><a id="A3" href="member_benefits.aspx" title="Memberships"><span>Memberships</span></a></li>
                                                <li><a id="link7" href="aboutus.aspx" title="Aboutus"><span>About us</span></a></li>
                                                <li><a id="linknews" href="news.aspx" title="News"><span>News</span></a></li>
                                                <li><a id="link8" href="contact.aspx" title="Contactus"><span>Contact
                                                    us</span></a></li>
                                                     <li><a id="A4" href="media_partners.aspx" title="Partners"><span>Partners</span></a></li>
                                            </ul>
                                            <div class="toplogin">
                                                <div class="topnav">
                                                    <a style="background-image: none; padding: 0;" href="addlisting.aspx">
                                                        <b>Join Free</b></a><b style="color: Red; float: left; padding:0px 5px 0px 5px;">|</b> <a href="login.aspx"
                                                            style="background-image: none; padding: 0;"><b>Member login</b></a></div>
                                            </div>
                                        </div>

 

  #tabsE a {
      float:left;
      background:url("images/tableftE.gif") no-repeat left top;
      background-size:320px 160px;//added by me
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
	  display:block;	  
      }

for the below url, it is not showing

background: url('https://ibb.co/bLEE5n') no-repeat left top;

Posted one year ago Modified on one year ago

Hi Abhays,

Check the example.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #tabsE a
        {
            background-size: 320px 160px;
            margin: 0;
            padding: 0 0 0 4px;
            text-decoration: none;
            display: block;
            float: left;
            background: url('https://i.imgur.com/73e8Dja.png') no-repeat left top;
        }
    </style>
</head>
<body>
    <div id="tabsE">
        <ul id="navigation">
            <li><a id="link1" href="Default.aspx" title="Home"><span>Home</span></a></li>
            <li><a id="link3" href="advertize.aspx" title="Advertise"><span>Advertise</span></a></li>
            <li><a id="link4" href="exhibition.aspx" title="Exhibitions"><span>Exhibitions</span></a>
                <ul>
                    <li><a id="A2" href="dubaiexhibitions.aspx" title="Trade fairs in U.A.E">Trade fairs
                        in U.A.E</a></li>
                    <li><a id="A1" href="exhibition.aspx" title="Trade fairs worldwide">Trade fairs worldwide</a></li>
                    <li><a id="A5" href="addexhibition.aspx" title="Add Your Event">Add Your Event</a></li>
                </ul>
            </li>
            <li><a id="link6" href="subscribe.aspx" title="Subscribe"><span>Subscribe</span></a></li>
            <li><a id="A3" href="member_benefits.aspx" title="Memberships"><span>Memberships</span></a></li>
            <li><a id="link7" href="aboutus.aspx" title="Aboutus"><span>About us</span></a></li>
            <li><a id="linknews" href="news.aspx" title="News"><span>News</span></a></li>
            <li><a id="link8" href="contact.aspx" title="Contactus"><span>Contact us</span></a></li>
            <li><a id="A4" href="media_partners.aspx" title="Partners"><span>Partners</span></a></li>
        </ul>
        <div class="toplogin">
            <div class="topnav">
                <a style="background-image: none; padding: 0;" href="addlisting.aspx"><b>Join Free</b></a><b
                    style="color: Red; float: left; padding: 0px 5px 0px 5px;">|</b> <a href="login.aspx"
                        style="background-image: none; padding: 0;"><b>Member login</b></a></div>
        </div>
    </div>
</body>
</html>

Screenshot

 


Posted one year ago

https://ibb.co/bLEE5n

The url you are passing is no a valid image path.

You need to pass valid image path.

The path should be https://image.ibb.co/dtqnQn/tableftE.gif