Photoshop Question posted in
The official user guide can be found here.

Setting the background of a css shape – Photoshop

So i have been trying to set a background image for the inner circle of the navbar you can see below, but i can’t seem to get it to work. i tried replacing the background colour on the css for the image url, with the proper formatting adjustments but no luck

enter image description here

The image i want to set as background:

enter image description here

Here is the css:

            nav.navbar{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                border-bottom: 45px solid #252525;
            }
            ul.nav{
                position: relative;
                float: left;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            ul.nav:before, ul.nav:after{
                content: '';
                position: absolute;
                left: 50%
            }
            ul.nav:before{
                /*this controlls the outer circle of the ball*/
                margin-left: -63px; /*split the width in half and set to negative: eg: 170 : 2 = 85 px*/ 
                top: 40px; /*this is relative to your image, which I measured in photoshop, it will add space from the bottom to up*/
                width: 127px; /*this is the effective width */
                height: 127px; /*this is the effective height: both values have to be the same in order to make it round! */ 
                background: #252525;
                border-radius: 100%;
                -webkit-border-radius: 100%;
                -moz-border-radius: 100%;
            }

            ul.nav:after{
                /*this controlls the inner circle of the ball*/
                margin-left: -35px; /*split the width in half and set to negative: eg: 100 : 2 = 50 px*/ 
                top: 70px; /*this is relative to your image, which I measured in photoshop, it will add space from the bottom to up*/
                width: 70px; /*this is the effective width */
                height: 70px; /*this is the effective height: both values have to be the same in order to make it round! */
                background: #fff;
                background: url:('/images/nav.png') no-repeat 0 0;
                border-radius: 100%;
                -webkit-border-radius: 100%;
                -moz-border-radius: 100%;
            }

            ul.nav:after:hover{
                background:url(http://i.imgur.com/6HIGiyt.png);
            }


            ul.nav > li {
                float: left;
                width: 16.66666666666667%;
                border-left: 0px solid #e3e2e2;
                border-right: 0px solid #e3e2e2;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                list-style: none;
                margin: 0;
                padding: 0;
                text-align: center;
            }

            ul.nav > li a{
                text-decoration: none;
                color: #fff;
                background: #3193a5;
                display: block;
                height: 81px;
                font-size: 1.2em;
                line-height: 81px;
            }

            ul.nav > li a:hover, ul.nav > li a.current{
                background: #3193a5;
                color: #2a2626;
            }

            ul.nav > li:first-child{
                border-left: none;
            }

            ul.nav > li:last-child{
                border-right: none;
            }

            #gymleaders .col-lg-3 img{
                padding: 5px;
            }
            .fixb{
                position:fixed;
                bottom:0px;
            }

Live Website: http://planetpixelmon.com

Fiddle: http://jsfiddle.net/MikeStardust/yq9Ge/

Thank you very much

Tags:

3

Answers


  1. 0

    change the following in your css

    background: url:('/images/nav.png') no-repeat 0 0;

    to

    ul.nav:after{
background: url('http://i.stack.imgur.com/5CtRq.png') no-repeat 0 0;
}
    Login or Signup to reply.
  2. 0

    in ul.nav:after you have url:, remove that :

    ul.nav:after{
   background: url('/images/nav.png') no-repeat 0 0;
}
    Login or Signup to reply.
  3. 0

    Based on the image you posted, you would use this:

    UPDATED EXAMPLE HERE

    ul.nav:after {
    background: url('http://i.stack.imgur.com/5CtRq.png') -10px -10px;
}

    This is essentially the same as this:

    ul.nav:after {
    background-image: url('http://i.stack.imgur.com/5CtRq.png');
    background-position:-10px -10px;
}

    Also, a content value won’t be needed because you already specified one here:

    ul.nav:before, ul.nav:after{
    content: '';
    position: absolute;
    left: 50%
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search