Question

i am using the following code to set the background image of the “logo” in h1 tag to the logo.

h1#logo {
margin: 5px 0 0 0px;
background: transparent url(../../assets/images/applewood_logo.png) no-repeat;
height:150px;
display:block;
cursor:pointer;
color: #ccc;
text-indent:-1900px;
max-width:145px;
background-size:100%;
z-index:500;

}

It works perfectly on all devices except blackberry where the edge of the logo is cut off. Here is a link to the site: http://www.applewoodindependent.co.uk

Answer 1

Used to css3-media-queries

Add to this css

@media only screen and (min-width:50px) and (max-width:480px) {
    h1#logo{
        background-size: auto 81px;
    }

}

More info