Background image not displaying correctly with css

Question

I'm having a problem with an image not displaying correctly behind other icons. I'm applying two separate images to surround icons. The first one displays fine but the second one clips off at the bottom.

Here's the site, the error can be seen in the footer: http://everythingdisc.hubs.vidyard.com/

<div class="inner">
    <div class="icons">
        <a href="https://www.linkedin.com/company/inscape-publishing?trk=company_name" id="linkedin">&nbsp;</a>
         <a href="https://twitter.com/everything_disc " id="twitter">&nbsp;</a>
         <a href="http://www.youtube.com/user/InscapeChannelDev" id="youtube">&nbsp;</a>
    <div class="clear-left">&nbsp;</div>
    </div>
</div>

Here's the CSS I'm using:

#social-media .inner {
  display: inline-block;
  height: 74px;
  padding: 0 0 0 30px;
  background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat;
}

#social-media .inner .icons {
  display: inline-block;
  width: auto;
  height: 59px;
  padding: 15px 20px 0 0;
  background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat;
}

Anyone know why the image isn't displaying property?

#social-media .inner .icons { height: 59px; } The height of that element should match the height of its parent (height:74px or height:100%). — showdev
– showdev, Commented Nov 13, 2014 at 18:18

Chitrang · Accepted Answer · 2014-11-13 18:18:36Z

1

You need to give same heights to both divs.

#social-media .inner {
display: inline-block;
height: 74px;
padding: 0 0 0 30px;
background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat;
}

#social-media .inner .icons {
display: inline-block;
width: auto;
height: 74px;
padding: 15px 20px 0 0;
background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat;
}

answered Nov 13, 2014 at 18:18

Chitrang

2,1141 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christopher White · Accepted Answer · 2014-11-13 18:29:58Z

From what I can see the div displaying the left side of your image is 74px high but the div displaying the right half is only 59px high. In addition the left side div contains the right side div and has bottom padding of 30px which is probably messing up the display of right side. Try something like this... I don't have your icons so the positioning may be off but your images show up correctly now

.inner {
  display: inline-block;
  height: 74px;
  padding: 0 0 0 30px;
  background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat;
}

.inner .icons {
  display: inline-block;
  width: auto;
  height: 74px;
  padding: 15px 20px 0 0;
  background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat;
}

    <div class="inner">
        <div class="icons">
            <a href="https://www.linkedin.com/company/inscape-publishing?trk=company_name" id="linkedin">icon1</a>
            <a href="https://twitter.com/everything_disc " id="twitter">icon2</a>
            <a href="http://www.youtube.com/user/InscapeChannelDev" id="youtube">icon3</a>
            <div class="clear-left">&nbsp;</div>
        </div>
    </div>

Collectives™ on Stack Overflow

Background image not displaying correctly with css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related