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

Pierre Smith
Pierre Smith
11,842 Points
Posted by Pierre Smith
Pierre Smith
11,842 Points

Weird result with border-image when running on an smaller screens.

I'm trying to have a wooden border for this website I'm working on so I decided to use border-image to grab the border of an image and all is great when dealing with a small amount of content that's placed within the div. However, when I mix a lot of content plus a small screen I get a strange result. it's like the border gets placed in the centre of the div.

Here's my code. 

.blackboard {

  border-image: url("img/chalkboard.jpg") 35 repeat;
    -o-border-image: url("img/chalkboard.jpg") 35 repeat;
    -moz-border-image: url("img/chalkboard.jpg") 35 repeat;
    -webkit-border-image: url("img/chalkboard.jpg") 35 repeat;

  border-width: 14px;

  background-image: url("img/blackboard.jpg"), no-repeat;

  box-shadow: 10px 10px 10px #888888;

  margin-bottom: 30px; 
  padding: 50px 40px 50px 40px;

  font-family: 'Indie Flower', cursive;
  font-size: 150%;
  color: #a0a0a0;

}

And here's a link to the odd result i'm talking about. https://drive.google.com/file/d/0B0QOgUzbNcrVOExlZFdJZGJIZHM/view?usp=sharing

Kenny Nadel
Kenny Nadel
7,695 Points

your background-image should be "background" and no comma in between url() and no-repeat. Try that.

Pierre Smith
Pierre Smith
11,842 Points
Pierre Smith
Pierre Smith
11,842 Points

it seems to fix that issue but there is one more problem that seems to effect iPhone 5 and 4s phones here's a link to the image. https://drive.google.com/file/d/0B0QOgUzbNcrVNnpoRWVLOUxFbm8/view?usp=sharing

The right and bottom border isn't rendering properly for some reason.

1 Answer

Kenny Nadel
Kenny Nadel
7,695 Points
Kenny Nadel
Kenny Nadel
7,695 Points

Remember that you have layers on layers for this. I see a shadow, the border, and a background. Make sure your z-index is set properly. That's what it looks like to me.

Pierre Smith
Pierre Smith
11,842 Points
Pierre Smith
Pierre Smith
11,842 Points

hmm... interresting I didn't know that shadows, borders and backgrounds are apart of separate z-indexes. How would I set the border z-index

Pierre Smith
Pierre Smith
11,842 Points
Pierre Smith
Pierre Smith
11,842 Points

Ok. so I have a question I've seen this post on stack http://stackoverflow.com/questions/12609425/css3-image-frame-border-z-index and when I try to set certain divs to relative and absolute it causes all types of design issues. Is it possible to achieve this without setting positions on my classes?