CODEWITHSUNDEEP
htmlcss
jhamm
jhamm

Reputation: 25032

How to make a full width image responsive

I have an image that is my header. Here is my simple HTML:

<html>
  <body>
    <div class="wrapper" />
  </body>
</html>

It fills the full width of the page, but I had to specify a height for it show up. Here is the css:

.wrapper {
  background-image: url(../assets/bridge.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 250px;
}

How do I make this image responsive? Right now when I expand the page it gets to the point where the pic is unrecognizable.

Upvotes: 1

Views: 14286

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157314

Didn't got your question quiet well, but I think you are missing a value here

background-size: 100%; /* 1 value is not wrong but you'll probably need 2 */
              --^---

CSS

.wrapper {
  background-image: url(http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 250px;
}

Demo

As ralph.m suggested, if you are using this image as your website background, than use the background property on body element instead of div

You need to use following CSS to make the background responsive

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

Reference Link

Upvotes: 5

ralph.m
ralph.m

Reputation: 14345

You need to think carefully about how you want/expect this to work. Without some actual content in the div, it will have zero height, which is why you needed to set a height on it; but in general, try to avoid setting heights. Presumably, if this is a "wrapper", it will be wrapping some content that will hold it open without you having to set a height.

As for the background image, you need to think about how it will behave. Do you just want it to appear in a strip along the top? If you use Mr Alien's solution, be aware that the image will stretch wider and wider and start to look odd. So we need some more information on what you are trying to do here.

Upvotes: 0

Related Questions