Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Matthew Stewart
Matthew Stewart
9,213 Points

border-image issues

I have and image which basically I want to repeat a section of on the x-axis.

I figured that using border-image would be the best way to solve this issue. Basically I have an image that I want to keep the same height on. I want the most right section of the image to repeat itself or stretch itself on the x-axis.

So from the left the image would stay the same for about 330px and then the remaining pixels to the right of that would repeat itself.

I pasted my code into codepen to share: http://codepen.io/matstewart/pen/thfqA

I'm not sure what I am doing wrong here, I've uploaded an image to my server to show an example of how this should look: http://www.flashpointmedica.com/matt/Aerospan/Aerospan-example.png

5 Answers

Rostislav Kavan
Rostislav Kavan
6,818 Points

I am not sure this can be done via single background command.

I would divide NAV into two columns, use this header.png as background for logo floated to left and then cut the part u wanna repeat and make it background for the right column.

Hope this can be useful to you.

Matthew Stewart
Matthew Stewart
9,213 Points

Sort of, but it's not totally there..

See this image? http://www.flashpointmedica.com/matt/Aerospan/header.png

I basically want the line on the right to just continue infinitely so that it's always taking up the whole percentage of the screen and can hold the navigation. Does that make sense?

Matthew Stewart
Matthew Stewart
9,213 Points

You might be right my friend. I feel like you should be able to using the image border and slicing the image in appropriate spots .. but seeing as I can't figure this out at the moment I think that what you're suggesting should work perfectly.

http://css-tricks.com/understanding-border-image/

Rostislav Kavan
Rostislav Kavan
6,818 Points

I gave up on border image long ago.

BTW, this might be exactly what u need. You might put two background images into one element. Should be largely compatible.

http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css