Member Avatar for Reliable

Hello,

Yes, I've googled it, but want to check for confirmation (mire if a trust issue). If I make colored tabs for my navigation elements that are at least as large as the largest element if not larger and set them as background images for a:hover will the image put itself into the smaller space so I have nice looking tab effect? For example, the biggest link on my nav bar my be "Services". If i may a tab image at least that big if not bigger w, when the user hovers over "Home" will the image still fit nicely in the background giving the desired effect?

Thanks for your time.

  • 2 Contributors
  • 4 Replies
  • 108 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by Reliable

Dani AI

Generated

Short answer for : a background image does not automatically shrink to fit a smaller element — the image is drawn at its native size and any overflow is clipped unless you explicitly scale it with CSS (the background-size property). As suggested, the simplest approach is to avoid full-image tabs when possible; for rounded-cap tabs you can either build them from smaller image slices (works in older browsers) or use modern CSS (no images).

A robust, non-CSS3 method (works in older UAs) is the “sliced caps” technique: use three small images — left cap, a 1px wide tiled center, and right cap — and place them in lightweight elements so the center repeats to match the text width. Example markup and CSS:

<a class="tab" href="#">
  <span class="cap left"></span>
  <span class="label">Services</span>
  <span class="cap right"></span>
</a>

.tab { display:inline-block; text-decoration:none; vertical-align:middle; }
.tab .cap { display:inline-block; width:10px; height:30px; }
.tab .cap.left { background:url('cap-left.png') no-repeat; }
.tab .label { display:inline-block; background:url('center-tile.png') repeat-x; padding:6px 12px; }
.tab .cap.right { background:url('cap-right.png') no-repeat; }

If building today, prefer plain CSS: use background-color + border-radius for rounded tabs and display:inline-block with horizontal padding. If you must use an image and want it scaled, background-size lets you control scaling (see links below).

Quick tips: leave enough horizontal padding so caps don’t overlap text; make anchors block/inline-block so the whole tab is clickable; use sprites to reduce requests; test hit areas on touch devices. For background sizing and modern rounded corners, see MDN’s background-size and border-radius, and for the classic sliding-doors approach see the original writeup.

References: background-size (MDN), border-radius (MDN), Sliding Doors technique (A List Apart)

Recommended Answers

All 4 Replies

Member Avatar for Tsakaki

I'm not sure if I'm understanding you're question properly, but it sounds like you want to use a single background image made to fit the largest tab you will have and apply it to ALL the tabs regardless of size?

If this is the case, I have a few questions.

1) Is the background image just a single solid color? Or a solid color with a border/outline? If so, you could easily accomplish this with CSS properties as opposed to using background images.

2) If the image is more complex than that, what are you including? Rounded corners, gradients, etc? If so, there are many ways of achieving this that require only slices of images as opposed to the whole solid image.

I'm not sure exactly what you're trying to accomplish, if you could clarify your question, I'll do my best to help you out!

Member Avatar for Reliable

Thank you for your help, and, you'r right. I should have been more clear. I didn't think about that. I have already accomplished one of the goals you mentioned with CSS whereby the background changes in a square shape. I was looking for the rounded corner look and was hoping to make a "one size fits all" image when it came to a solid color.

Member Avatar for Tsakaki

http://www.daniweb.com/forums/thread334507.html

The above is a link to another thread discussing rounded corners. Multiple methods have been posted and elaborated on, depending what browsers/methods you want. Including css3, using images and javascript.

Member Avatar for Reliable

Thanks. I'll check out the article behind the link. I won't be using CSS3, though until it becomes more supported in browsers.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.