Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by May Le Floch
May Le Floch
1,477 Points

menu background image not showing in full

Hi,

I was wondering if anyone could help with this:
I have a menu, and on the current page, the .highlighted class needs to display an image below the menu's text (ie: below 'home'). I am trying to use css background to do this, and it almost works, but for some reason, part of the image is cut off and not displayed. I don't know why! I would be grateful for any help... :-) thank you! (sorry I don't know how to make the code appear in a 'code box'...)

this is the css:

nav { float: right; margin-top: 3%; margin-bottom: 5%; margin-left: auto; margin-right: auto; font-size: .9em; padding-bottom: 55px;

}

ul li { float:left; list-style-type: none; margin-right: 25px;

}

ul li a {

text-decoration: none; font-size: 1em; border-bottom:#ccc 4px solid; padding-bottom: 15px; -o-transition: color .6s, border-bottom .6s; -ms-transition: color .6s, border-bottom .6s; -moz-transition: color .6s, border-bottom .6s; -webkit-transition: color .6s, border-bottom .6s;

}

ul li a:hover { color: #29ABE2; border-bottom:#29ABE2 4px solid; padding-bottom: 15px;

-o-transition: color .6s, border-bottom .6s; -ms-transition: color .6s, border-bottom .6s; -moz-transition: color .6s, border-bottom .6s; -webkit-transition: color .6s, border-bottom .6s;

}

ul li .highlight, ul li .highlight:hover { background-image: url(images/spiralarrow.png); background-repeat:no-repeat;

background-position: 50% 150%; border-style: none; padding-bottom: 15px; padding-top: 15px;

}

5 Answers

Matt Campbell
Matt Campbell
9,767 Points

Set the image width and height to 100% and if you want it to scale set it max-width and max-height of 100%. Also set the background-size to contain. But, you need to be careful of the ratio of your picture. If it's a square going in a square you'll be fine.

In future, head over to codepen.io, put the html and CSS in there and use something like photobucket to host image and link the image url to where image are required. Then someone can quickly and easily make tweaks and see what's going on.

Sharon Walls
Sharon Walls
9,234 Points
Sharon Walls
Sharon Walls
9,234 Points

Have you correctly defined the min-height of the element containing the background image?

Teagan Nelson
Teagan Nelson
3,141 Points
Teagan Nelson
Teagan Nelson
3,141 Points

I'm pretty sure you are going to want your background to repeat...

May Le Floch
May Le Floch
1,477 Points
May Le Floch
May Le Floch
1,477 Points

Thanks for your reply,

I don't want the background to repeat... what I am trying to achieve is to have my graphic, which is basically an arrow, show below the link for the current page, as an indication to the user that they are on this page...

I just want the graphic to show once, below the word. It does show the way it is now, but it is somehow cut at the bottom, most of the arrow shows except the bottom bit which is cut... hope that makes sense.

Thanks! May

May Le Floch
May Le Floch
1,477 Points
May Le Floch
May Le Floch
1,477 Points

Thanks for this. I have managed to sort it out... background-position should have been 100% not 150%!! and I should have set a height as well!! It works how I wanted it to now...

Many thanks for your answers !

May