How to properly format a bleeding image so that it appears in proper ratio

Question

I have a container that is keeping the content to a max-width of 1200px and want to have a main image that is placed as the background of the .main_prize_section and can expand on bigger screens while staying within the proper aspect ratio. the main wrapper image is like a container for the main content, so it cant appear distorted.

here is the html code

<section class="main_prize_section">
  <div class="container">
    <div>
      <div class="row">
        <div class="flex_row">
          <div class="col_1_2">
            <div> 
              <h1>TEST HEADER</h1>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quae quo fugit asperiores, aperiam perspiciatis dolores consectetur quam nemo, laudantium et doloribus officia voluptates eveniet optio ad ab quaerat natus!</p>
            </div>
            <div> 
              <h2>sub header</h2>
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti accusantium molestiae id a quae pariatur? Sequi ipsum quos libero aspernatur tempore molestiae facere, porro, autem perferendis, atque aut earum reiciendis.</p>
            </div>
          </div>
          <div class="col_1_2 main_prize_product"><img src="images/english/prize_images.png" alt="" width="100%"/></div>
        </div>
      </div>
    </div>
  </div>
</section>

here is the css code

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.flex_col {
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
            flex-direction: column;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
}

.flex_row {
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
}

.col_1_2 {
    width: 50%;
}

.main_prize_section {
    text-align: center;
    background: url("../images/prize_background.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    background-position: 50% 50%;
    text-align: center;
}

.main_prize_section img {
    width: 50%;
    margin: 0 auto;
}

.main_prize_section .flex_row {
    padding: 2%;
}

.main_prize_section h1 {
    color: pink;
    font-size: 4rem;
    font-weight: 700;
}

.main_prize_section h2 {
    color: pink;
    font-size: 2.5rem;
    font-weight: 700;
}

.main_prize_section .col_1_2 div:nth-child(2) {
    padding: 2%;
}

.main_prize_section p:nth-child(2) {
    padding: 2%;
}

.main_prize_section p span:nth-child(1) {
    color: gold;
}

.main_prize_section p span:nth-child(2) {
    color: pink;
}

.main_prize_section p span:nth-child(3) {
    color: red;
}

.main_prize_section p span:nth-child(4) {
    color: blue;
}

the main wrapper image that bleeds out is 1366x800.

You need help with CSS. By providing pug code instead of the result, you limit the pool of people able to help you to those who know both CSS and what pug does. Why not provide the result of pug, which is valid markup, which everybody knows and understands? Besides, it can be tested in a browser. — tao, May 11 '18 at 13:30

score 0 · Answer 1 · answered May 12 '18 at 11:10

See if this helps you: https://codepen.io/panchroma/pen/jxxoqO

The important bit is the CSS lines 36 - 39

.main_prize_section {
  ...  
  background:url("../images/prize_background.png");
  background-repeat: no-repeat;
  background-size:cover;  /* could also be  background-size:contain; */
  background-position:50% 50%;  /* adjust to fit your design and the image */
}

For the background size, use either 'cover' or 'contain', and in combination with the background-position values, find a combination of settings that work for your specific design and image.

Good luck!

How to properly format a bleeding image so that it appears in proper ratio

1 Answers1