0

I'm trying to scale down a background image with css. My browser has it scaled all the way to it's maximum resolution, and nothing that should work, is working.

When I try and use max-width it doesn't scale the image, it only cuts off the right edge of the image, and it stays at the same scale.

Here's my CSS 

.proj-header{ /* Settings for projects bgr image */
    position: relative;
    bottom: 20;
    height: 450;
    background-image: url(pics/fight_shy_lot.jpg);
    background-repeat:no-repeat; 
    background-position: 50% 38%;
    max-height: 40%;
    max-width: 100%;
    background-attachment: fixed;
    background-position: center;

}

I don't think html is important as it's just an empty div. Everything is in the css.

The only thing I could get to work is background-size, but it lead to issues when the viewport is resized from my base res.

So my questions is why isn't max-width doing what everyone says it should be doing, or am I using it wrong?

I'm pretty new to web design so I'm sorry if this is a stupid question, but I searched all over for an answer, and all people say is to use max-width, which doesn't do anything for me.

Agilroy
  • 1
  • Have you tried the background-size property? – Evan Bechtol Oct 24 '15 at 20:34
  • Yeah, like I mentioned in my post, that worked to an extent, but it introduced a lot of issues when I resized the window, so I'd like to avoid it. – Agilroy Oct 24 '15 at 20:42
  • 1
    Background-size is the way to go. Max-width has little to do with it. Could you describe in more detail what problems you encountered with using background-sze? I see no viewport-changing problems on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images) in the sections about cover and contain. – trincot Oct 24 '15 at 20:42
  • 1
    max-width limits the width of a container, it is not related to the size of a background image. Backgrounds can be larger, smaller than their container, or different aspect ratio. Please state precisely what you want to achieve – Hacktisch Oct 24 '15 at 21:13
  • Hey, sorry for the late response. I'm trying to keep the container the same size while scaling the image down within it. Everything I googled said to use max-width, but I guess that's not the case for what I'm trying to achieve? Thanks for the replys. – Agilroy Oct 25 '15 at 05:06

0 Answers0