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 Jacob Thomson
Jacob Thomson
757 Points

How do i resize my image?

Hey guys,

I don't know if i can explain my problem well, but here it is.. I have big slider image under my header with text on top of that image using the position property. What I'm trying to accomplish is to have that image cropped on the top and bottom, without disturbing the text over the image. This is my current html markup for the slider and text: 

<div id="slider">
                <div class="croppedslider">
                    <img id="sliderimg" src="images/sliderimage.jpg" alt="">
                </div>
                    <h3 id="slider-header">FIRST HOME OWNERS GRANT<br><span id="slider-header2">ENDING SOON</span></h3>
                    <hr id="sliderline">
                    <p id="sliderinfo">Cash in on the government's $30,000 first home owners grant <br>and get your first home built for you, today. Interested? Call us!
                    </p>
                    <a href="#contactsection" id="getintouch" class="nav-link">
                        GET IN TOUCH
                    </a>
            </div>

This is my current css for the slider:

#slider img {
    width: 100%;
    height: 100%;
    position: relative;
}

#sliderimg {
  position: absolute;
  left: 0;
  top: 0;
}

#slider-header {
  z-index:100;
  position:absolute;    
  font-size:30px;
  font-family: Raleway-Thin, helvetica, sans-serif; 
  left: 500px;
  top: 500px;
}

#slider-header2 {
  font-family: Raleway-ExtraBold, helvetica, sans-serif;
}

hr {
  height: 3px;
  background: #FFFFFF;
  border: 0;
  border-color: #FFFFFF;
}

#sliderline {
  width: 430px;
  z-index: 99;
  position: absolute;
  color: #FFFFFF;
  left: 500px;
  top: 605px;
}

#sliderinfo {
  z-index: 98;
  position: absolute;
  left: 500px;
  top: 615px;
  font-family: Raleway-Regular, helvetica, sans-serif;
  font-size: 11pt;
}

#getintouch {
  z-index: 97;
  position: absolute;
  left: 500px;
  top: 680px;
  font-family: Oswald-Light, helvetica, sans-serif;
  border-style: solid;
  border-width: 1px;
  border-color: #25AAE1;
  padding: 7px 12px;
  background-color: #25AAE1;
}
Jacob Thomson
Jacob Thomson
757 Points

Also, I'm very new to html and css, (this is my first website that im developing by myself) So if you see something incorrect, please tell me! Thanks a lot guys

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

What you probably want to do is to make sure the images you use are all the same size, so there's consistency in the image sizes before you do anything with then.

I'm not sure what you mean by "cropping" in CSS but if you want elements to appear in a certain order, so they're stacked one over the other you could try the z-index rule.

The bigger the number assigned, the higher the element seems to be layered above the other.

z-index: 1;

Hope this helps!

Jacob Thomson
Jacob Thomson
757 Points

I want the part of the image slider to appear hidden, I dont want the full-size image.. I know you can achieve this through CSS, using overflow property, but cannot get it without warping the image. Very hard to explain, still cannot figure this out, Jonathan Grieve