[CSS3] Achtergrond afbeelding schalen

[Herby]

Laat ik beginnen dat dit een template is, welke ik dus niet zelf ontwikkeld heb. Het probleem waar ik tegenaan loop is dat het logo niet goed schaalt en delen overlapt, of zelfs deels word weergegeven op mobiel.

Affijn hier is de CCS die ermee gemoeid is:

Cascading Stylesheet:

.logo-block #rt-logo {
    display: block;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    position: relative;
    z-index: 1;
}
#rt-logo {
    height: 168px;
    width: 350px;
}
#rt-logo {
    background-attachment: scroll !important;
    background-clip: border-box !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-image: url("/images/LogoATEXglob.png") !important;
    background-origin: padding-box !important;
    background-position: 50% 0 !important;
    background-repeat: no-repeat !important;
    background-size: auto auto !important;

(Update) : https://jsfiddle.net/Herby/mkkweukr/

Als ik de hoogte van rt-logo aanpas verdwijnt de hele div, iets wat ik niet snap (CSS is ingewikkeld, heb mij suf gelezen, maar alle goede info voor starters is zéér welkom!!). Als ik de breedte naar auto zet en background-size op contain krijg ik redelijk wat ik wil, maar zit er heel veel lege ruimte onder het logo en de content en dat ziet er dus niet uit, tevens is het logo dan veel kleiner dan gewenst.

Kan iemand mij op gang helpen ? Info over hoe het zelf uit te zoeken word ook zéér gewaardeerd!

[RobIII]

Herby schreef op donderdag 11 februari 2016 @ 18:20:
Kan iemand mij op gang helpen ? Info over hoe het zelf uit te zoeken word ook zéér gewaardeerd!

Begin eens met 't posten van de (relevante!) HTML en maak daarna eens een jsfiddle (testcase, geen complete template a.u.b.!) zodat we het probleem "in actie" kunnen zien / ermee kunnen spelen. We kunnen je best in de juiste richting wijzen (en je dus helpen 't zelf op te lossen) maar dan moeten we wel de juiste informatie hebben. Wil je 't wat zelfstandiger oplossen dan kan ik je alleen maar adviseren de "dev tools" van je browser in te duiken en daar eens goed te kijken wat er loos is (zie Firefox Firebug of Dev.tools / IE F12 Dev.tools / Chrome Dev.tools / Safari Dev.tools / Opera Dragonfly)

[Woy]

Tevens even een move -> WEB

[Herby]

RobIII schreef op donderdag 11 februari 2016 @ 19:12:
[...]

Begin eens met 't posten van de (relevante!) HTML en maak daarna eens een jsfiddle (testcase, geen complete template a.u.b.!) zodat we het probleem "in actie" kunnen zien / ermee kunnen spelen. We kunnen je best in de juiste richting wijzen (en je dus helpen 't zelf op te lossen) maar dan moeten we wel de juiste informatie hebben. Wil je 't wat zelfstandiger oplossen dan kan ik je alleen maar adviseren de "dev tools" van je browser in te duiken en daar eens goed te kijken wat er loos is (zie Firefox Firebug of Dev.tools / IE F12 Dev.tools / Chrome Dev.tools / Safari Dev.tools / Opera Dragonfly)

Ahh vergeten in de TS te zetten, maar de aanpassingen die ik had geprobeerd, had ik dus gedaan middels Firebug, maar helaas lukt het mij niet om de boel te doorgronden en het juiste resultaat te bereiken.

jsFiddle is nieuw voor mij, maar het is gelukt om het probleem daar te reproduceren, ben er alleen niet zeker van of alle relevante HTML er nu bij staat.

https://jsfiddle.net/Herby/mkkweukr/

offtopic:
Excuses voor verkeerde plaatsing, dacht echt dat ik in Web zat

[Kragoth]

Als ik het goed begrijp is je probleem volgens mij opgelost met de volgende aanpassing:

#rt-logo {
- overige css -
background-size: contain !important;
}

in plaats van

#rt-logo {
- overige css -
background-size: auto auto !important;
}

zie ook:
http://www.w3schools.com/cssref/css3_pr_background-size.asp

NVM, volgens mij vermeld je dit al in je post.

[ Voor 28% gewijzigd door Kragoth op 12-02-2016 16:22 ]

[FotW]

background-size: auto 100%; zorgt ervoor dat de afbeelding in de hoogte schaalt,, background-size: 100% auto; doet hetzelfde in de breedte. Zie: https://jsfiddle.net/mkkweukr/4/

Het is mij verder een raadsel waarom je zo vaak !important gebruikt.