PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

background-resize vier hoeken

Door Danny von Gaal op 25-09-2015 15:45 gewijzigd op 25-09-2015 15:45
2.093 views
Ik heb een zelf gemaakte submit button waarbij ik mijn plaatje als background heb ingesteld. Alleen nu wil ik wanneer erop geklikt wordt dat de button een klein beetje kleiner wordt. Dit werkt alleen wordt het plaatje maar aan twee kanten kleiner ipv aan vier kanten.

Dus het lijkt alsof het wordt verplaatst naar links boven.

Hoe krijg ik dit plaatje dat het aan vier kanten wordt verkleind?


.bt-start-war {
	background-image: url("../images/start_war.png");
	background-position:  0px 0px;
	background-repeat: no-repeat;
	width: 179px;
	height: 55px;
	border: 0px;
	background-color: transparent;
	cursor: pointer;
}

.bt-start-war:active {
	background-size: 95% 95%;
}
J
Johan K
25-09-2015 19:04 gewijzigd op 25-09-2015 19:59
probeer eens:


  padding: 2px;
  /* pf */ 
  background-position: 5%;


Maar als je het aan mij vraagt kan je beter:
<div>
 <img ... />
 <input type="button" />
</div>

gebruiken
J
Johan K
25-09-2015 20:03 gewijzigd op 25-09-2015 20:04 
.bt-start-war:active {
    background-position: 5px 2px;
	background-size: 95% 90%;
}


Aangezien ik mijn reactie had aangepast het is misschien beter om een losse image tag te gebruiken en daarop padding te zetten. Dit, zodat het dynamisch is want anders moet je gaan calculeren over wat "5%" is over 179 en 55 pixels zijn.
Danny von Gaal
25-09-2015 20:10
Ik snap niet precies wat je bedoelt.
Maar die 5% kleiner die ik nu heb is prima, alleen zoals me fiddle laat zien gebeurd dit alleen rechts en onder en niet ook boven en links.
J
Johan K
25-09-2015 20:31 gewijzigd op 25-09-2015 21:11
Danny von Gaal op 25/09/2015 20:10:48

Ik snap niet precies wat je bedoelt.
Maar die 5% kleiner die ik nu heb is prima, alleen zoals me fiddle laat zien gebeurd dit alleen rechts en onder en niet ook boven en links.


Dat komt omdat je background image word ingekort met die 5%. Aangezien de background-position op 0,0 staat (dus links boven aan).

Je zou dus in jouw voorbeeld background position moeten aanpassen wat 5% / 2 of 2.5% is van de height en width van jouw ".bt-start-war" classe en hierop de position instellen. kan via Javascript of "hardcoded" in je css.

Maar aangezien 5% van "width: 179px;" niet op een heel getal uit komt zal dus je image ook nooit precies gecentreerd staan.

Of wat ik bedoelde inplaats van 1 element, gebruik er 2.


<div> // deze div bevat de groote van het element
 <input type="button"> // deze input bevat de image background (100% width & height)
</div>


op :active hoef je dan dus alleen maar een padding in te voeren op je input wat dus dynamisch is mocht het icoon dus ooit in de toekomst veranderen. Makkelijker dan deze hardcoded issue uit je CSS te halen & met wat andere css class namen maakt het ook meteen je CSS reuseable.
Eddy E
27-09-2015 15:29
Zet je background-position op center center... dan werkt het wel?
Danny von Gaal
28-09-2015 10:05 gewijzigd op 28-09-2015 10:35
Eddy E op 27/09/2015 15:29:27

Zet je background-position op center center... dan werkt het wel?


Perfect! Bedankt.
Weet je toevallig ook hoe ik die stomme border weg haal in Chrome? Border: 0; of none; werkt helaas niet.
Marthijn Buijs
28-09-2015 16:32 gewijzigd op 28-09-2015 16:33
Dit heet outline, dit zou het moeten weghalen:


.bt-start-war:focus {
  outline: none;
}

Reageren

Inloggen om te reageren