Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
Like Tree1Likes
  • 1 Post By Vapr_Arts

Thread: Adding border image to div

  1. #1
    Junior Member
    Join Date
    Jan 2015
    Posts
    24
    Member #
    41395
    Liked
    2 times

    Adding border image to div

    Hey Guys, So I'm trying to add a simple border around my div but just isn't showing up. Hopefully its something simple I am missing. Or if there is a way I can overflow the image outside the div. Here's what I have:

    #big_box {

    width: 690px;
    height: 483px;
    position:relative;
    float: left;
    /* Curves div Corners */
    border-radius: 1em;
    margin: 2em 0 2em 1em;

    /* Give div Border */
    border-style: solid;
    border-width: 0px;
    z-index:99;
    border-image: url(images/bbcollage/treeoflife.png);
    }

    Here's my site for reference (look on my portfolio page): http://mast.salemstate.edu/itc18244/Portfolio/
    Last edited by mkymn8828; Mar 16th, 2015 at 12:59 PM.

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Your border width is 0px. As in 0px will be visible. Honestly i haven't used an image as a border and am completely blanking on the process from when i learned about it but just assuming here that you would need that number to be larger than zero. Have you tried messing with that?

    Or it may be an issue with the path/location of the image. You may need something along the lines of:

    Border-image: url(/images/bbcollage/treeoflife.png);



    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

  4. #3
    Junior Member
    Join Date
    Jan 2015
    Posts
    24
    Member #
    41395
    Liked
    2 times
    the path directory is correct. If I set the border to a specific location like border-left or border right all i get is a black solid line around the div an not the image I'm specifying. I don't want to slice the image or anything I just want it to overlap the div edge so the image sits right on top of it.

    If I type this code in:

    border-width: 20px;
    border-image: url(images/bbcollage/border.png) 20 20 20 20;

    I see an image on the top an bottom of the div but not all around. maybe my main container is to small?

  5. #4
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    You know honestly im not sure. Like i said ive never actually used a border image but when learning css i know i spent some time doing it. So if it comes back to me or if i get some freetime ill look further into it. Sorry i couldnt be of more help! Hopefully someone else will chime in and solve it for you.


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks
    mkymn8828 likes this.

  6. #5
    Junior Member
    Join Date
    Jan 2015
    Posts
    24
    Member #
    41395
    Liked
    2 times
    Certainly appreciate your input, thank you.

  7. #6
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    You miss more border properties and mozilla and webkit declarations. Maybe this can help:
    https://css-tricks.com/understanding-border-image/

  8. #7
    Junior Member
    Join Date
    Jan 2015
    Posts
    24
    Member #
    41395
    Liked
    2 times
    hmm I actually already came across that page and I just don't get how the code works for it. I have the image up on my site now that I want to border around the Div. So here's what I ended up doing, I just put the image in its own div with a higher z-index but then I loose functionality of the slideshow buttons that are within the div I want to have bordered.

    So just trying to see what I can do best with what I have. Take a look at my site if you haven't already and you'll see what I mean (on my portfolio page)

    http://mast.salemstate.edu/itc18244/Portfolio

    Appreciate any input
    Last edited by mkymn8828; Mar 20th, 2015 at 09:10 AM.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:03 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com