CSS background-size：1000x100图形的封面和背景位置

Question

I have a layout issue I can't seem to figure out. It involves a background image in a div that is 100% width of a viewport. The background-image is 1000px wide, but I want it to always stretch to fill the width of the div mentioned above, whether the viewport is 200px wide or 600px wide or 1000px wide or 1600px wide. Another requirement is that the graphic should keep its aspect ratio unless it's less than 50px tall, at which time the graphic should remain at a minimum height of 50px and kept centered horizontally within the div. Which means that the narrower the viewport gets, the less and less you can see of the graphic itself -- until you can see only the center of it.

I'm using background-size: cover, which works beautifully for when the viewport is >= 500px (ie, the background-graphic is at the minimum height of 50px). However, I don't know how to keep the graphic centered as a background-image at widths below 500px.

Is there a CSS rule that can handle this? Or do I need to use a media query and/or javascript to make this happen?

Answer 1

Rather than background-size: cover; try background-size: 100% auto; to base it off the width of it's container and not the height. It still follow it's aspect ration but doesn't worry about the height anymore.

Answer 2

Hello your question is not very clear. But you could use this to have a Background stretched and covered.You can set a fixed and centered background on it, then adjust it's size using background-size.

html { 
  background: url (images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}