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 Kamal Nassouh
Kamal Nassouh
2,465 Points

Website image issues.

So I have been taking the HTML and CSS track on treehouse, i figure the best way to learn is to simply replicate a few sites.

So i have two quick questions relating to this code I am trying to write: https://codepen.io/LamboNas/pen/joXdwW

.lifetime-img when I try to make the image larger using Width and height attributes the background image gets larger too.

Secondly, when I try and push that same image down using margin, it wont move, it pushes the background image down.

Any help would be appreciated!!

1 Answer

Liam Clarke
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 Points

Hi Kamal

First question. Can you be more specific when i make the logo larger the background stays the same? Only when i change the screen resolution does the background move as it is set to cover.

Second question. The img element is an inline element. When it comes to margin and padding they act slightly differently. you can add space to the left and right but you cannot add height to the top and bottom.

Solution

Wrap them in a div to make the height property not affect the image element

<div class="aef-banner-bg">
    <div class="the-new-div">
            <img src="https://auselectricalforce.com.au/wp-content/uploads/2015/11/banner-header-no-border-220x300.png" alt="Sydney Electricians lifetime warranty">

        <h2 class="main-heading">Get a <span class="special-highlight">FAST</span>, 
            <span class="special-highlight">HONEST</span>, 
            <span class="special-highlight">QUALITY</span> service <span class="special-highlight">EVERYTIME!</span>
        </h2>

        <div class="callout-buttons">
            <button type="button" class="btn btn-outline-primary btn-lg btn-change button-white">CALL US NOW</button>
            <button type="button" class="btn btn-outline-primary btn-lg btn-change button-white">02 8331 7199</button>
            <button type="button" class="btn btn-primary btn-lg">GET A FREE QUOTE</button>
        </div>
    </div>
</div>

.the-new-div {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

The above puts the image container height 100% and centers it. We do this so we don't distort the image or make the image grow with the container. The image size stays the same whilst the container size increase making sure the image stays central.