Take a fresh look at your lifestyle.

Stay Home, Stay Safe, Stay Alive.COVID-19

CSS background image positioning

0
In this tutorial I will show you how to add image using css3 background image properties. If your menu item is not same you can use this process but it is same to other menu item you can fix it using css3. I also show you how to make nice looking menu using css3 in other tutorial. But Today I will show only css background image properties. Some time you need to make only image menu then you can follow this process.
/*---------------Full width menu for desktop version-------------------*/
.pc ul{
     background:url("images/menu_bg.png") no-repeat 0 0;
     width: 1195px;
     height: 128px;
     padding:0;
}
.pc ul li{
     width:322px;
     float:left;
     list-style:none;
     padding:0;
}
.pc ul li a{
     text-indent: -9999px;
     display:block;text-decoration: none;height: 128px;
}
.pc ul li.home a:hover, .pc ul li.home.active a{
     background: url("images/main_menu.png") no-repeat;
     background-position:0px 17px;
}
li.construction_results{
     width:192px !important;
}
.pc ul li.construction_results a:hover, .pc ul li.construction_results.active a{
     background-position: -322px 17px;
     background-image:url(images/construction_results.png);
     background-repeat:no-repeat;
}
li.working_process{
     width:190px !important;
}
.pc ul li.working_process a:hover, .pc ul li.working_process.active a{
     background-position:-514px 18px;
     background-image:url(images/working_process.png);
     background-repeat:no-repeat;
}
.pc ul li.order_flow a:hover, .pc ul li.order_flow.active a{
     background-position:-704px 17px;
     background-image:url(images/order_flow.png);
     background-repeat:no-repeat;
}
li.order_flow{
     width:191px !important;
}
.pc ul li.information_of a:hover, .pc ul li.information_of.active a{
     background-position:-895px 18px;
     background-image:url(images/information-of.png);
     background-repeat:no-repeat;
}
li.information_of {width:195px !important;}

Leave A Reply

Your email address will not be published.