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
Matthew Stewart
9,214 Pointsborder-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
6,818 PointsI 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.
Dalton Patterson
Full Stack JavaScript Techdegree Student 11,754 Pointsheader nav { height: 108px; width: 100%; border-image: url("http://www.flashpointmedica.com/matt/Aerospan/header.png") 0 10 0 10 stretch; -webkit-border-image: url("http://www.flashpointmedica.com/matt/Aerospan/header.png") 0 10 0 10 stretch; -o-border-image: url("http://www.flashpointmedica.com/matt/Aerospan/header.png") 0 10 0 10 stretch; -moz-border-image: url("http://www.flashpointmedica.com/matt/Aerospan/header.png") 0 10 0 10 stretch; }
is this the effect you are looking ofr?
Matthew Stewart
9,214 PointsSort 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
9,214 PointsYou 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.
Rostislav Kavan
6,818 PointsI 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