SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive Background Image

    Hey guys it's been a while since I last posted. I need some help resolving an issue with a background image. When I reduce the screen resolution from 960 to 768, the YouTube logo in the "More Videos" sidebar on the index page does not scale. It also gets cut off as the viewport becomes smaller.

    What is causing this and how do I fix it?

    Here is a link to github --> link

  2. #2
    SitePoint Member paurushpandit's Avatar
    Join Date
    Jun 2009
    Location
    New Delhi, India
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you made this hidden using media queries? I ask since this does not render at all when the width of the page is reduced to the said size?
    Cheers!
    Paurush

  3. #3
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paurushpandit View Post
    Have you made this hidden using media queries? I ask since this does not render at all when the width of the page is reduced to the said size?
    I should have been more specific, I apologize. I am using media queries, but the sidebar is visible between 960 and 768. The sidebar is removed when the resolution is under 768. The YouTube logo is cropped between the sizes of 960 and 768. How do I make the background image resize as the page resizes?

    Here is a screenshot of the page at 800:


  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Background images don't scale. But this problem you are having would be easily solved by setting a pixel width on the h3 rather than a % width:

    e.g. instead of

    Code:
    #more_videos h3 {
    float: left;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 22%;
    margin-bottom: 10px;
    width: 28%;
    background: url('../images/youtube_bw.png') no-repeat;
    height: 35px;
    }
    try this

    Code:
    #more_videos h3 {
    float: right;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 22%;
    margin-bottom: 10px;
    width: 84px;
    background: url('../images/youtube_bw.png') no-repeat;
    height: 35px;
    }
    and then change this

    Code:
    #more_videos ul {
    clear: left;
    font: 1em helvetica, arial, sans-serif;
    margin-bottom: 10px;
    }
    to this

    Code:
    #more_videos ul {
    clear: both;
    font: 1em helvetica, arial, sans-serif;
    margin-bottom: 10px;
    }

  5. #5
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph,

    That worked great! Thank you for your help.

    I got one more question for you regarding background images. The play buttons are an image sprite and I cannot get them to flow with the media query without them being distorted, too small and/or cut off like the YouTube logo. How can I make the image sprite remain the same size as the resolution gets smaller between 960 and 768?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Again, instead of giving the <a> a % width, give it the same width as the area of the sprite image that you want to be available.

  7. #7
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help! That worked!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Great. Glad to hear it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •