Html Question posted in
Some basic documentation can be found here.

Html – CSS stepped border – recreate design piece

I’m struggling to recreate a designed header from a poster in html/css.

I can get it to work as per the image, but it needs to have a transparent background so the image shows through. However, the dividing border appears as soon as I make the background transparent, which is not what I want.

Is there any way around this?

Image of header with solid background

html {
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: url(https://www.iwa.ie/app/themes/iwa-theme/resources/assets/img/sport/basketball/senior-league-main-hero.webp) 50% / cover;
}

.branded-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand-header-top {
  display: inline-block;
  border: 2px solid #fff;
  border-bottom: none;
  border-radius: 8px 20px 0 0;
  padding: 7px 37px 0px 20px;
  text-align: left;
  font-size: 35px;
  background: #transparent;
  position: relative;
  z-index: 1;
  color: #fff
}

.brand-header-bottom {
  display: inline-block;
  border: 2px solid #fff;
  border-top: 2px solid #fff;
  border-radius: 0 8px 8px 8px;
  padding: 16px 19px 6px 20px;
  text-align: left;
  font-size: 53px;
  background: #transparent;
  margin-top: -2px;
  font-family: CentraleSans, sans-serif;
  color: #fff;
  line-height: 64px;
}
<div class="container">
  <div class="branded-header" style="margin-top: 60px">
    <div class="brand-header-top">
      Wheelchair Basketball
    </div>
    <div class="brand-header-bottom">
      Senior League 2024/2025
    </div>
  </div>

</div>
Tags:

3

Answers


  1. 0

    I think there are multiple ways you can achieve this layout and you are probably in a good path by now so I’m just going to give you an idea for the background image effect. The following method uses a background image, a color overlay and a blend mode to achieve a similar effect. Here’s an example:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div.background {
  height: 250px;
  /* 1. Add your background image */
  background-image: url(https://cdn.nba.com/manage/2021/05/morant-driving-1-784x441.jpg);
  /* 2. Set a color overlay */
  background-color: #c55935;
  /* 3. Use a blend mode to achieve the visual effect you want */
  background-blend-mode: multiply;
  background-position: center;
  background-size: cover;
}
    <div class="background">
  <!-- YOUR CONTENT! -->
</div>

    In this case the multiply blend mode works because it multiplies your image with the overlay color, resulting in a darker image. This mode is particularly useful for adding color tints to images while retaining detail which I think is exactly what you’d want here.

    Login or Signup to reply.
  2. 0

    Adding the same background image with background-attachment:fixed to your .brand-header-top would do the trick:

    html {
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: url(https://www.iwa.ie/app/themes/iwa-theme/resources/assets/img/sport/basketball/senior-league-main-hero.webp) fixed 50% / cover;
}

.branded-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand-header-top {
  display: inline-block;
  border: 2px solid #fff;
  border-bottom: none;
  border-radius: 8px 20px 0 0;
  padding: 7px 37px 0px 20px;
  text-align: left;
  font-size: 35px;
  background: url(https://www.iwa.ie/app/themes/iwa-theme/resources/assets/img/sport/basketball/senior-league-main-hero.webp) fixed 50% / cover;
  position: relative;
  z-index: 1;
  color: #fff
}

.brand-header-bottom {
  display: inline-block;
  border: 2px solid #fff;
  border-top: 2px solid #fff;
  border-radius: 0 8px 8px 8px;
  padding: 16px 19px 6px 20px;
  text-align: left;
  font-size: 53px;
  margin-top: -2px;
  font-family: CentraleSans, sans-serif;
  color: #fff;
  line-height: 64px;
}
    <div class="container">
  <div class="branded-header" style="margin-top: 60px">
    <div class="brand-header-top">
      Wheelchair Basketball
    </div>
    <div class="brand-header-bottom">
      Senior League 2024/2025
    </div>
  </div>

</div>
    Login or Signup to reply.
  3. 0

    I updated your code a little bit and it works exactly same as your design.

    html {
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: url(https://www.iwa.ie/app/themes/iwa-theme/resources/assets/img/sport/basketball/senior-league-main-hero.webp) 50% / cover;
}

.branded-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.brand-header-top {
    display: inline-block;
    border: 2px solid #fff;
    border-bottom: 0 solid #c55935;
    border-radius: 8px 20px 0 0;
    padding: 7px 37px 0px 20px;
    text-align: left;
    font-size: 35px;
    background: transparent;
    position: relative;
    z-index: 1;
    color: #fff;                
    background-color: #c55935;
}

.brand-header-bottom {
    display: inline-block;
    border: 2px solid #fff;
    border-top: 2px solid #fff;
    border-radius: 0 8px 8px 8px;
    padding: 16px 19px 6px 20px;
    text-align: left;
    font-size: 53px;
    background: transparent;
    margin-top: -2px;
    font-family: CentraleSans, sans-serif;
    color: #fff;
    line-height: 64px;
    background-color: #c55935;
}
    <div class="container">
    <div class="branded-header" style="margin-top: 60px">
        <div class="brand-header-top">
            Wheelchair Basketball
        </div>
        <div class="brand-header-bottom">
            Senior League 2024/2025
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search