CODEWITHSUNDEEP
htmlcssresponsive-design
Lars
Lars

Reputation: 589

Responsive elements with CSS background-image

I want to create a football field showing player formation.

Main problem is having the formation positions relative to the football field when background-size is set to contain. https://jsfiddle.net/ypvonhhy/1/

Best solution I've come up with is to let the height be static: https://jsfiddle.net/a4y9dqqo/3/

 .outer {
   width: 100%;
   height: 900px;
 }
 
 section.field {
    width: 100%;
    min-height: 200px;
    max-height: 320px;
    background: url('http://s16.postimg.org/c5a4is9sl/field.png') no-repeat;
    background-size: 100% 100%;
    position: relative;;
  }
  
.player {
    font-size: 1.2rem;
    position: absolute;
}
<div class="outer">

  <section class="field">

    <i class="player" style="left: 28%; top: 14%;">*</i> 
    <i class="player" style="left: 39%; top: 9%;">*</i>
    <i class="player" style="left: 58%; top: 9%;">*</i>
    <i class="player" style="left: 69%; top: 14%;">*</i>

  </section>

</div>

This gets uglier when screen size has major differences (small/big).

Would there be any better solutions for this setup?

Upvotes: 1

Views: 206

Answers (2)

MattPW
MattPW

Reputation: 1

The issue with contain is that it is assuming the image fits the size of the container at this point 900 px high ( .outer) so the positioning of the players is actually correct. if the actual image was 900px then this would work perfectly.

All i have done is add a static size to .outer

fiddle

 .outer {
   width:500px ;
   height:163px;
 }

Sorry for editing the other answer :s

Upvotes: 0

Sergiy T.
Sergiy T.

Reputation: 1453

The problem is that you have set height of .outer to 900px and background-size to contain, which means it is scaled untill it fit.

You can declare background-size: 100% 100%; which will scale image to fit horizontally and vertically (distorting the image if necessary).

But perhaps it is not what you want, so I think you may draw the field using basic shapes and css-transforms (or svg if you like) so it will fit the .outer and perhaps look better than scaled image.

Upvotes: 1

Related Questions