[CSS] 'Overflow:visible' met negatieve background-position

[Ronnyrr]

Tweakers,

Voor een website probeer ik een submit knop met een achtergrond afbeelding te maken welke buiten de bovenliggende elementen valt. Het lijkt mij logisch dat dit met een

code:

overflow: visible

op te lossen is, echter heb ik dit overal op geprobeerd toe te passen maar lijkt het niet te werken.

Ik heb een JSFiddle gemaakt waarin mijn probleem met de submit knop ook zichtbaar is. Iemand die hiervoor een oplossing weet?

Bedankt!

[ByteMe_]

Als ik de url van de background-image test:

http://www.startrainingen...ges/buttons/read-more.png

wordt deze niet gevonden. Daar ligt het probleem

[Sthomkop]

Het ontbreken van het achtergrondplaatje is inderdaad een probleem... maar dat lost het niet op. De reden is eigenlijk heel simpel: de overflow-property heeft geen invloed op de achtergrond van een element. De overflow zegt alleen of kinderen van een HTML element erbuiten kunnen vallen of niet, de achtergrond van een element vult alleen het element zelf.

Twee oplossingen:
1. Prop een <img ...> tag in je input en positioneer die met wat position: absolute magie (position: relative op de input zelf). Dit raad ik niet aan.
2. Maak je input groot genoeg zodat het plaatje er netjes in past. Dit is denk ik de netste oplossing. Zorgt ervoor dat andere elementen niet per ongeluk over de knop heen kunnen vallen bijvoorbeeld en geeft ook geen ongewenste tekst/elementen in je knop (semantisch gezien beter)

[Ronnyrr]

Dat de afbeelding niet zichtbaar was kwam doordat ik een IP-check via htaccess deed op het domein waar de afbeelding staat. Excuses hiervoor, had hier niet aan gedacht tijden het stellen van de vraag.

Tevens wel bedankt voor je antwoork @Sthomkop.
Ik heb er voor je eerste oplossing gekozen, een button met submit type gekozen en de afbeelding erachter geplaatst. Mijn voorkeur had het ook om voor oplossing twee te gaan, maar zo was het ontwerp aangeleverd en tja als ze het écht willen..