Hi,

I created this HTML version of a flash website, in order to make it mobile friendly: http://www.materiaprimacr.com/2/

It's supposed to be a responsive design. However, I'm having problems with the images on the top menu, and the ones used below for the slider tabs. They are not shrinking at all, and thus are scrambling the page at small screen sizes. They should shrink proportionally, as the main big images are doing.

For both of them, I used a css list style menu using background images and a hover effect. I believe the way to achieve this is using background-size, but I tried it and was unable to do it.

Any help is greatly appreciated!

Here's an example of my current code:

HTML:

<ul class="tabs">
<li class="tab1"><a href="#"></a></li>
<li class="tab2"><a href="#"></a></li>
<li class="tab3"><a href="#"></a></li>
<li class="tab4"><a href="#"></a></li></ul>

CSS:

li.tab1 a {
    background: url(../images/rocaoff.jpg) no-repeat 0 0;
    font-size:11px;
    display:block;
    height: 51px;
    line-height:30px;
    width: 134px;
    text-align:center;
    text-decoration:none;
    color:#333;
    padding:0px;
    margin:0px;
    position:relative;
    top:0px;
    border-right:1px;
    border-style:solid;
    border-color:#fff;
}

li.tab1 a:hover {
    background: url(../images/rocaon.jpg) no-repeat 0 0;
}

And my css files: http://www.materiaprimacr.com/2/css/tabs.css http://www.materiaprimacr.com/2/css/styles.css

Note: For phone-size screens I'm currently disabling the top menu, so you won't be able to see it.

2 answers

danwellman 5600
0
points

background-size is the correct property to use. You've given the links a fixed size, which is probably the cause of the issues. In RWD nothing (or as few things as possible) should have a fixed size. Give the links a relative size and the bg images should then scale

Answered about 5 years ago by danwellman
  • Thanks Dan. I'm sorry, but unfortunately I'm not very good with css. I've been trying several options using background-size:cover and giving the links a relative size, but all I get is the images not showing at all. I don't know what can be wrong. Do you have any idea on how to fix it? Dave David Vargas about 5 years ago
  • I'm making some progress now, will post soon.. David Vargas about 5 years ago
  • Note, that older versions of IE don't support the background-size property. Here's an article that covers the various methods and limitations in detail: http://www.sitepoint.com/css3-background-size-property/ Gary Hepting about 5 years ago
0
points

OK, so I managed to set the link sizes as relative, and I'm using background-size:contain, so the menu and tabs images are now scaling. The problem I'm facing now is that the background images on the top menu are of different widths, so I'm not being able to set them side by side and have the same height. Any clues?

My CSS for this is near the end at: http://www.materiaprimacr.com/2/css/styles.css

Thanks a lot,

Dave.

Answered about 5 years ago by David Vargas