Responsive Background Image

HTML & CSS
1

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

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?

3

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:

777×363 56.3 KB

4

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

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

try this

#more_videos h3 {
float: [COLOR="#FF0000"]right[/COLOR];
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
[COLOR="#008000"][s]margin-left: 22%;[/s][/COLOR]
margin-bottom: 10px;
width: [COLOR="#FF0000"]84px[/COLOR];
background: url('../images/youtube_bw.png') no-repeat;
height: 35px;
}

and then change this

#more_videos ul {
clear: [COLOR="#FF0000"]left[/COLOR];
font: 1em helvetica, arial, sans-serif;
margin-bottom: 10px;
}

to this

#more_videos ul {
clear: [COLOR="#FF0000"]both[/COLOR];
font: 1em helvetica, arial, sans-serif;
margin-bottom: 10px;
}
5

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

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

Thank you for your help! That worked!

8

Great. Glad to hear it. :slight_smile: