Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

image problem

Hello, i have 2 images of 2 characters, that i positioned absolute, so they are 1 to the left and 1 to the right, just like this http://i.imgur.com/KwzphQP.jpg but the problem is that when i rezise my browser, the characters follow along, they do not stay at the same position, Note that my page is fixed, and the characters should stay at the same position, but i cant figure out how, can anyone help? heres the code

.support-text {
  width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: -2px;
    margin-bottom: 130px;

}

.support-text h1 {
  font-size: 30px;
}

.support-text {
  clear: left;
}

.support-text {
  font-size: 23px;
}

.support-img {
  margin-top: -80px;
  margin-bottom: 80px;
  z-index: 1;
}

.ct-pic {
  position: absolute;
  right: 10px;
  bottom: 30px;
  float: right;
}

.ct-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic {
  position: absolute;
  left: 40px;
  bottom: 30px;
  float: left;
}

<section class="support-text">
          <img src="img/ct.png" class="ct-pic">
     <img src="img/t.png" class="t-pic" width="867" height="569">
      <img src="img/support-us.png" class="support-img">
      <p>Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,
Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,. </p>

    </section>

1 Answer

Francesca Canu
Francesca Canu
1,695 Points

Hi! i think that your problem might be, if i understood right, that the container element .support-text has no { position: relative; } in its css declaration. if you want to position the images like they are OUTSIDE the container you can give them a negative margin of the same size. i hope it helps.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

The problem is that the images move around when i resize the browser i want them to be positioned at the same position