-1

i made a section in my website that include two columns the first one includes text and 3 buttons the second column is including img

this is my HTML section

    </section>
    <div class="mb-5 pb-5 mt-5">
      <section class="section-container">
        <div class="text-container">
          <div class="text">
            <h2>HyperOliviaSmile</h2>
            <p style="color: #d54415">Fast treatment times. Period.</p>
            <p id="removepadding">
              With our exclusive HyperByte device included with each teeth
              aligner plan, you get fast and comfortable treatment for a smile
              you love.
              <sup>4</sup>
            </p>
          </div>
          <div class="button-row">
            <button class="firstbtn">
              <img src="img/jsimg/HyperByte.avif" />
              <p>HyperOliviaSmile</p>
            </button>
            <button class="secbtn">
              <img src="img/icon_basma/garante.jpeg" />
              <p>Guarantee</p>
            </button>
            <button class="thirdbtn">
              <img
                src="img/jsimg/Doctor Directed.avif"
                style="object-fit: contain"
              />
              <p>DoctorDirected</p>
            </button>
          </div>
        </div>
        <div class="image-container">
          <img
            class="img1"
            style="position: relative ; background-image:url(img/jsimg/home_guarantee_900x.webp);"
          />
        </div>
      </section>
    </div>

and this is my js

document.addEventListener("DOMContentLoaded", function() {
  const button1 = document.querySelector('.firstbtn');
  const button2 = document.querySelector('.secbtn');
  const button3 = document.querySelector('.thirdbtn');
  const img1 = document.querySelector('.img1');
  const newText = document.querySelector('.text')
  
  button1.addEventListener('click', () => {
    updateButtonState(button1);
    img1.style.backgroundImage="url(img/jsimg/home_hyperbyte_900x.webp)";
    newText.innerHTML ='<h2 >HyperOliviaSmile</h2><p style="color: #d54415;">Fast treatment times. Period.</p><p>With our exclusive HyperByte device included with each teethaligner plan, you get fast and comfortable treatment for a smileyou love. <sup>4</sup></p></p>'

  });
  
  button2.addEventListener('click', () => {
    updateButtonState(button2);
    img1.style.backgroundImage="url(img/jsimg/home_guarantee_900x.webp)";
    newText.innerHTML= '<h2 >Our Guarante</h2><p style="color: #d54415;">Your smile, for life.</p><p >You own your smile, and you should own it forever. If your smile moves out of alignment at any time after your treatment with Byte aligners, we’ll help get it back at no additional cost. </p>'
  });
  
  button3.addEventListener('click', () => {
    updateButtonState(button3);
    img1.style.backgroundImage="url(img/jsimg/home_smilescience_900x.webp)";
    newText.innerHTML ='<h2>Doctor Directed</h2><p  style="color: #d54415;">Your treatment plan is reviewed and approved by a licensed dentist or orthodontist.</p><p>Your clinical team is available 7 days a week to help monitor your progress.</p>'
  });
  
  function updateButtonState(clickedButton) {
    button1.classList.remove('addborder');
    button2.classList.remove('addborder');
    button3.classList.remove('addborder');
  
    clickedButton.classList.add('addborder');
  }
});

the code is working with out any problem no error on the console but I didn't know why the image is not appearing on the left there is nothing related to this section is written on CSS so no problem will happened from CSS side

i tryed to fix it by using console.log but with out any error i didn't know how to fix the problem

HALOSSO
  • 3
  • 2
  • 1
    If you want to change the image an `` element displays, you need to change the `src` attribute, not the background image CSS style. – Sean Apr 10 '23 at 11:32
  • i did it by using the src first and It works fine but they asked me after that to make the picture to fit all of the div how can i do that by using the src not background proprites? – HALOSSO Apr 10 '23 at 11:37
  • Use [`object-fit`](https://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements/26967278#26967278). – Sean Apr 10 '23 at 11:38
  • i used object-fit and set height and width to prevent the image from becoming bigger object-fit: cover; width: 100%; height: 30rem; } thank you so much appreciate your time – HALOSSO Apr 10 '23 at 11:44

1 Answers1

0

You can fix this in one of two ways:

First, you can access your element and change its "src" tag in JS like this:

elem.src = "your_src"

Also, you can change the element's background-image property like this with JS:

elem.style.backgroundImage = "url('your_src')"

Or from CSS:

elem {
  background-color: url('your_src')
}
Forilin
  • 31
  • 3