How to changes background of image in photoshop




select image open into photoshop then creat same layer ctl+j

then fill the color alt+backspace

then select darkin from the above layer

then select both layers and press ctl+e to merge

Image Large Size Horizontal Use 

HTML

<div class="service">

            <div class="row">

            <div class="col-md-6">

                <div class="row">

                    <div class="col-md-6">

                        <div class="img-wrapper">

                            <img class="img-responsive" src="images/business-men.jpg">

                        </div>

                    </div>

                    <div class="col-md-6"></div>

                </div>

            </div>

            <div class="col-md-6">

                 <div class="row">

                    <div class="col-md-6"></div>

                    <div class="col-md-6">

                         <div class="img-wrapper">

                             <img class="img-responsive" src="images/women-with-beg.jpg">

                        </div>

                    </div>

                </div>

            </div>

        </div>

        </div>

CSS

.service .img-wrapper {

1. padding-bottom: 219.905%;
2. overflow: hidden;
3. position: relative;

}

.service .img-wrapper img {

1. left: -23.2849%;
2. top: 0%;
3. width: 146.57%;
4. height: 100%;
5. position: absolute;
6. max-width: none;

}

Remove background

select pen tool

select area

then ctl+enter

then ctl+j

done


shahzad_samejo@yahoo.com

Bootstrap No Gutter Need Css

/*Bootstrap No Gutter  css left and right paste into you css put class into row  */


.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}



shahzad_samejo@yahoo.com

animation car

HTML

           <div class="animate-bus">
                <img src="images/animate-bus2.png" alt="">
            </div>


Css

.animate-bus {

1. width: 230px;
2. height: 98px;
3. -webkit-transition: all 3s ease-in-out;
4. -moz-transition: all 3s ease-in-out;
5. -ms-transition: all 3s ease-in-out;
6. -o-transition: all 3s ease-in-out;
7. transition: all 3s ease-in-out;
8. -webkit-animation: animate 7s ease-in-out 2s infinite;
9. -moz-animation: animate 7s ease-in-out 2s infinite;
10. -ms-animation: animate 7s ease-in-out 2s infinite;
11. -o-animation: animate 7s ease-in-out 2s infinite;
12. animation: animate 7s ease-in-out 2s infinite;

}

shahzad_samejo@yahoo.com

Bounce Effect html and css

HTML

                               <h1>
                                    <b style="color:#ffffff;">Tel. No.:</b>
                                    <span style="color: #ef4daa;">0</span>
                                    <span style="color: #ef4daa;">2</span>
                                    <span style="color: #ef4daa;">0</span>
                                    <span style="color: #ef4daa;">7</span>
                                    <span style="color: #f7ad00;">2</span>
                                    <span style="color: #f7ad00;">4</span>
                                    <span style="color: #f7ad00;">7</span>
                                    <span style="color: #ef4daa;">7</span>
                                    <span style="color: #ef4daa;">0</span>
                                    <span style="color: #ef4daa;">0</span>
                                    <span style="color: #ef4daa;">0</span>

                                </h1>
Css

h1 span:nth-child(2) {

1. animation-delay: .1s;

}

h1 span {

1. position: relative;
2. top: 20px;
3. margin-top: 0px;
4. margin-bottom: 0px;
5. display: inline-block;
6. animation: bounce 1.3s ease infinite alternate;
7. font-family: 'Titan One', cursive;
8. font-size: 50px;
9. color: #FFF;
10. font-weight: 700;

}

shahzad_samejo@yahoo.com

curve design html css

before

.contact-w3ls {

1. background: #000;
2. position: relative;
3. padding-top: 0!important;
4. margin-top: 6.3em;

}

.contact-w3ls:before {

1. content: "";
2. position: absolute;
3. top: -106px;
4. border-width: 0 882px 106px 0;
5. border-style: solid;
6. border-color: transparent transparent #00aeef #00aeef;
7. display: block;
8. width: 0;

}

.contact-w3ls:after {

1. content: "";
2. position: absolute;
3. top: -120px;
4. right: 0;
5. border-width: 0px 1904px 120px 0;
6. border-style: solid;
7. border-color: transparent transparent #000 #000;
8. display: block;
9. transform: rotateY(180deg);
10. -webkit-transform: rotateY(180deg);
11. -o-transform: rotateY(180deg);
12. -ms-transform: rotateY(180deg);
13. -moz-transform: rotateY(180deg);
14. width: 0;

}