Do I need any of these styles on img2?

HTML & CSS
1

Do I need any of these codes on img2, and that they are useless, or do I keep any of them?

background-position:center;

When that is removed, it’s still centered, so I’m not sure how useful that code is.

background-repeat: no-repeat;

When I increase the background space, and put, background -repeat; repeat; nothing happens.
So, I’m not sure how useful that code is.

background-size: 180px 180px;

When I remove that from the code, nothing happens, so I’m not sure how useful that code is.

 .img2 {
    background-repeat: no-repeat; 
    background-position:center;
    background-size: 180px 180px;
  }

With them removed:

What do you say?

Also, is there a specific reason why these 2 style codes don’t function, or are disabled on img2?

background-repeat: no-repeat; or even repeat 
background-position:center;

<style>
  #playButton4 {
    position: relative;
    border: 3px solid #0059dd;
    width: 260px;
    height: 194px;
    cursor: pointer;
    background-color: black;
    margin-top: 8px;
  }

  .img1 {
    position:absolute;
    background: url(https://i.imgur.com/BO6KOvw.jpg);
    background-repeat: no-repeat; 
    background-position:center;
    background-size: 170px 112px;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    margin: 12px 45px;
  }
  
  
  .img2 {
    position:absolute;
    background: url(https://i.imgur.com/4HJbzEq.png);
    background-repeat: no-repeat; 
    background-position:center;
    background-size: 180px 180px;
    width: 180px;
    height: 180px;
    margin: 7px 40px ;
  }

  #grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }
  


</style>

<div id="playButton4" onclick="">

  <div class="img1"></div>
  <div class="img2"></div>
  <div id="grad"></div>
2

If you remove some styles, and the result is the same, and is what you are wanting, then by all means, remove them. They are probably redundant.

2 Likes
3

How are they redundant, if they don’t work by themselves, look at this?

And why don’t they work, can someone explain to me this?

background-repeat: repeat; 
background-position:center;


<style>
  #playButton4 {
    border: 3px solid #0059dd;
    width: 500px;
    height: 500px;
    cursor: pointer;
    background-color: black;
    margin-top: 8px;
  }
  
  .img2 {
    background: url(https://i.imgur.com/4HJbzEq.png);
    background-repeat: repeat; 
    background-position:center;
    background-size: 180px 180px;
    width: 180px;
    height: 180px;
    margin: 7px 40px ;
  }

 
  
</style>

<div id="playButton4" onclick="">

  <div class="img2"></div>
  </div>
4

They are only redundant in this exact piece of code, where it functions the same with or without those lines, so you can safely omit them.

They do work. You have simply failed to understand how they work. @coothead gave you a good, clear explanation of sizing here, which you should read and reread until you understand it completely: Getting the right image to size up the same as the left - #11 by coothead

In your code above, you have set width and height (i.e. the dimensions of the container) to 180px by 180px. Your background image is 180px by 180px. What result would you expect from that, other than the image appearing exactly once in the given container? It can’t possibly repeat, because there is nowhere for a repeat to appear.

Try setting your width and height values to numbers greater than 180px, and see what the effect of those two rules is then. Test your code with and without each rule to see what happens.

4 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.