CODEWITHSUNDEEP
javascripthtmlcss
AggieDev
AggieDev

Reputation: 5045

Background image looks wrong when website is loaded on a mobile device

I currently have it to where the current link is "underlined", but the underline is an image as I wanted it to look Android-style. The image looks like this when the web page is loaded on a normal desktop pc:

enter image description here

The image itself is a simple image with the top 90% transparent and the bottom 1/8th of it blue. Whenever the web page is loaded on a phone, it turns into this:

enter image description here

The css for it is this:

#currentlink
{
    background-image:url('../images/menu-underline.png');
    background-position:center;
}

With this html:

<div id="menu">
    <ul id="menulinks">
    <li><a href="index.html">About me</a></li>
    <li><a id="currentlink" href="">Apps & Projects</a></li>
    <li><a href="workwithme.html">Work with Me</a></li>
    </ul>
<hr>

I have also tried making the image simply just the blue line, and changing the css to have background-position:bottom but it made the whole entire box blue.

Upvotes: 0

Views: 236

Answers (3)

gauravmuk
gauravmuk

Reputation: 1616

This should resolve your issue:

#currentlink {
 background-image:url('../images/menu-underline.png') no-repeat center center fixed;
}

The problem is your background image repeated itself, for the Android Device, in which you viewing the WebPage, either you can fire media queries for the same to adjust the background image for specific resolution only.

Upvotes: 1

Xavier_Ex
Xavier_Ex

Reputation: 8810

As @natewiley suggested I'd recommend doing such simple styling with CSS only, so your client doesn't have to download extra assets (images). But in your particular case, since on a phone the size of the list items changes and thus causing the background image to shift position.

You can try setting background-repeat: no-repeat to prevent the background image from repeating itself to fill the space, so you should at least see just one blue line instead of two. Though you'll need to adjust where the blue line should be.

Upvotes: 0

codeaddict
codeaddict

Reputation: 879

Why not just use the border-bottom property?

#currentlink {
  border-bottom: 5px solid #35B5E5; /* this is your blue color */
}

The problem is on a phone your li's are adjusting, and the image isnt scaling proportionally.

Upvotes: 3

Related Questions