Image scaling/positioning in fluid responsive layout

HTML & CSS
10

Great! With just some slight modification to the following:

.workMod1 a  {
    display:block;
    background-color:#fff;
    background-position:50% 50%;  /* horiz vert  bgimage position */
    background-size:cover;  /* uncomment to allow scaling.  Try It... you might like it :smile: */
    padding-top:280px;  /* height of image window */
}
.workMod1 .galIMGwph  {
    background-image:url("svg/nku24_sm.png");
    background-size:contain;
    background-repeat: no-repeat;
}

I was able to get it to basically where I want it.
Turns out the scaling wasn’t horrible important.

I will have to analyze your table/table-cell solution and how/why
background-size:cover and background-size: contain are interacting the way they are.

1 Like