img, embed, object, video {
max-width: 100%;
}
ul.nav
{
list-style-type: none;
padding: 0;
margin: 0;
float: left;
}
.nav li#welcome a {
background-image:url(images/ic1.png);
background-repeat: no-repeat;
}
.nav li#welcome a:hover {
background-image:url(images/ic1b.png);
background-repeat: no-repeat;
}
.nav li#welcome2 a {
background-image:url(images/ic1.png);
background-repeat: no-repeat;
}
.nav li#welcome2 a:hover {
background-image:url(images/ic1b.png);
background-repeat: no-repeat;
}
.nav li#welcome3 a {
background-image:url(images/ic1.png);
background-repeat: no-repeat;
}
.nav li#welcome3 a:hover {
background-image:url(images/ic1b.png);
background-repeat: no-repeat;
}
.nav li#welcome4 a {
background-image:url(images/ic1.png);
background-repeat: no-repeat;
}
.nav li#welcome4 a:hover {
background-image:url(images/ic1b.png);
background-repeat: no-repeat;
}
#head ul li a
{
text-decoration: none;
float:left;
margin-right:40px;
}
#head ul li
{
display: inline;
}
#head img
{
max-width: 100%;
}
#head ul
{
/*margin-left: 15%;*/
padding:0;
list-style-type: none;
border:none;
}
@media screen and (min-width: 960px)
{
ul.nav a{ height: 100px; width: 100px;}
}
@media screen and (max-width: 959px)
{
ul.nav a{ height: 50px; width: 50px;}
}
</style>
</head>
<body>
lkjl
<div id="head">
<ul class="nav">
<li id="welcome"><a href="home.html"></a></a></li>
<li id="welcome2"><a href="home.html"></a></a></li>
<li id="welcome3"><a href="home.html"></a></a></li>
<li id="welcome4"><a href="home.html"></a></a></li>
</ul>
</div>
.nav li#welcome a {
background-image:url(images/ic1.png); /*todo set %size here */
background-repeat: no-repeat;
background-size:100% 100%;
}
.nav li#welcome a:hover {
background-image:url(images/ic1b.png);
background-repeat: no-repeat;
}
.nav li#welcome2 a {
background-image:url(images/ic1.png);
background-repeat: no-repeat;
background-size:100% 100%;
}
.nav li#welcome2 a:hover {
background-image:url(images/ic1b.png);
background-repeat: no-repeat;
}
#head ul li a
{
text-decoration: none;
float:left;
margin-right:40px;
}
#head ul li
{
max-width:100px;
}
#welcome{
max-width:100px;
}
#welcome2{
max-width:100px;
}
@media screen and (min-width: 960px)
{
}
@media screen and (max-width: 959px)
{
}
</style>
</head>
<body>
lkjl
<div id="head">
<ul class="nav">
<li id="welcome"><a href="home.html"></a></li>
<li id="welcome2"><a href="home.html"></a></li>
</ul>
</div>
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
From novice to tech pro — start learning today.
Open in new window
So you will have:Open in new window
Forgot to add that you need to add it to all styles with images.
Here is demo:
http://jsfiddle.net/TxSrg/