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

Html – How to make active tab background as a parent background-image

I have a codepen
link
the issue is I want to make active tab background like a continue of the parent background image. Also as you see the tabs shows the paret of images between gap and near border-radius which is not acceptable as well.

<div class="container">...

.container {
  display: flex;
  flex-flow: column;
  max-width: 540px;
  background-image:  url("https://images.ctfassets.net/hrltx12pl8hq/5ZjPpfAhn1rZWeopnHiXb/3e1b9a709297905672a0d24eac94a873/thumb_nov22_03.jpg");
}
.tabs {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: space-between;
/*  куски image чтобы не было видно между табами  */
}

.tab-item {
  width: 33.33%;
  background: red;
  padding: 20px;
  border-radius: 15px 15px 0 0;
}

.tab-item .active {
/* быть такого же цвета как и image   */
}

.content {
  height: 500px;
  width: 500px;
  padding: 20px;
}
<div class="container">
  <div class="tabs">
    <div class="tab-item active">one</div>
    <div class="tab-item">two</div>
    <div class="tab-item">three</div>
  </div>
  <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo cumque veniam magni earum aliquam suscipit minus natus neque ut, velit alias odio porro numquam accusantium! Assumenda autem aliquid corporis. Cupiditate.</div>
</div>
Tags:

2

Answers


  1. 0

    Your post is slightly unclear but it seems like you were wanting this:

    .container {
  display: flex;
  flex-flow: column;
  max-width: 540px;
}
.tabs {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: space-between;
/*  куски image чтобы не было видно между табами  */
}

.tab-item {
  width: 33.33%;
  background: red;
  padding: 20px;
  border-radius: 15px 15px 0 0;
  height: 50px;
  box-sizing: border-box;
}

.tab-item.active {
  background-image:  url("https://images.ctfassets.net/hrltx12pl8hq/5ZjPpfAhn1rZWeopnHiXb/3e1b9a709297905672a0d24eac94a873/thumb_nov22_03.jpg");
}

.content {
  height: 400px;
  width: 500px;
  padding: 20px;
  flex-grow: 1;
    background-image:  url("https://images.ctfassets.net/hrltx12pl8hq/5ZjPpfAhn1rZWeopnHiXb/3e1b9a709297905672a0d24eac94a873/thumb_nov22_03.jpg");
  background-position: 0px -50px;
}
    <div class="container">
  <div class="tabs">
    <div class="tab-item active">one</div>
    <div class="tab-item">two</div>
    <div class="tab-item">three</div>
  </div>
  <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo cumque veniam magni earum aliquam suscipit minus natus neque ut, velit alias odio porro numquam accusantium! Assumenda autem aliquid corporis. Cupiditate.</div>
</div>

    Essentially what I did is I just put the background image on the active tab and the content and then offset the content by the height of the tab. I gave the tab an explicit height to make sure it was pixel perfect as well.

    Login or Signup to reply.
  2. 0

    It seems like you are having a few issues with your code, that you want to fix. That means it isn’t a simple tweak of a property, but more of an issue with getting everything to work together. If you had clickable tabs, then you could manipulate :hover and :active and possibly use the property of "opacity" to achieve something you want. I think switching over to clickable radio buttons will be a good start to achieving the look you’ve described.

    There’s a video on YouTube that I believe will help you get what you want.
    Search for "How to Easily Create Pure CSS Tabs (No JavaScript Needed!)" the content creator is dcode. Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search