background image with 100% width

Question

As we all know, we can create a responsive image with 100% of parent width and height according to ratio with following code. However, I would like to achieve the same effect by treating it as background image using background-image CSS.

It seems that I am unable to find any solution to it.

<div style="margin: 0 20px;">
 <div style="width: 100%">
     <img style="width: 100%" src="http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg">
 </div>
</div>

It seems that a lot have given answer about background: contain and background: cover and it does not work. I have provided a code snippet as follow for better clarification.

Rules:
1) Height of div should not be specified.
2) background CSS should be used (and this is why I call it as background image).
3) Background image height should auto scale according to the width.

.bg-image {
  width: 100%;
  background: url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg') no-repeat;
}

<div style="margin: 0 20px;">
     <div class="bg-image">
 
     </div>
    </div>

Try somthing like `background-size: cover;`, the image will fill all the area of your div. — Obzi, Oct 19 '16 at 14:24
I think the missing link here is that the div has no height. Whereas an image will expand the div to fit it's height, a `background-image` will not apply any height to the div. If you want to use `background-size`, you must specify a height on your div, or put content in it to expand it. — Tyler Roper, Oct 19 '16 at 14:27
Duplicate - http://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size?noredirect=1&lq=1 — Paulie_D, Oct 19 '16 at 14:58

score 1 · Answer 1 · edited May 23 '17 at 12:00

1

I found another solution, which was mention in here. You can do this by using the codes like below.

HTML

<div id="wrapper">
    <img src="http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg" />
</div>

CSS

#wrapper {
   background: url(http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#wrapper > img {
  visibility: hidden;
}

By doing so, you don't need to specify any fixed height. The height of div will be equal to the height of the actual image.

Here is the updated version of your code:

#wrapper {
   background: url(http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#wrapper > img {
  visibility: hidden;
}

<div id="wrapper">
 <img src="http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg" />
</div>

edited May 23 '17 at 12:00

Community

1
1

answered Oct 19 '16 at 14:24

Kaan Burak Sener

974
10
19

Well i should have mention that i want to acheive about using `background-image` without specifying height of the container ... – desmondlee Oct 19 '16 at 14:30
If you don't want to specify a height to the div, or add any content, what is your reason for not using `` in the first place? – Tyler Roper Oct 19 '16 at 14:31
@Santi code intuitive purpose. I would like to add text above the image and centering it. It could be done without using background image with absolute positioning but it just doesnt look good to me as it create long winded html and css code – desmondlee Oct 19 '16 at 14:44
You're putting your spoon down and asking us how to eat your soup with a fork. You've asked your original question all wrong. You should ask "how do I center an image below text", not "how do I avoid using ". There are a dozen ways to get text centered above an image without using `position: absolute;` or `background-image`. – Tyler Roper Oct 19 '16 at 14:46

hairmot · Answer 2 · 2016-10-19T14:46:46.427

0

You need to have the inner div fill the parent div - hence the width and height 100%. Then just set the background size to 100% for each.

<div style="height:300px; width:300px;">
    <div id="bg">
    </div>
</div>

<style>
    #bg { 
        width: 100%;
        height:100%;
        background-size:100% 100%;
        background-image:url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg');
    }
</style>

Example jsfiddle here

edited Oct 19 '16 at 14:46

answered Oct 19 '16 at 14:42

hairmot

2,975
1
13
26

He said that he wants to do this without specifying height. – Kaan Burak Sener Oct 19 '16 at 14:43
the only way this question makes sense is if the parent div has some kind of height - no height = no background cos there would be no area visible.. I've provided 300px as an example. – hairmot Oct 19 '16 at 14:46

score 0 · Answer 3 · answered Oct 19 '16 at 16:22

Set the padding of the image or the div to 100%, like this:

.bg-image{
    background: url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg')  no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding:100%;

 }

score 0 · Answer 4 · answered Sep 03 '17 at 11:53

it's very simple, you have just to add somme properties to the css class ;) i hope that is what you are looking for

.bg-image {
  width: 100%;
  background: url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg');
  background-repeat: no-repeat;
  
  background-position: 50% 50%;/*  */
  background-size: cover; 
  height: 43.5625rem;
  left:0;
  right:0;
  top:0;
  bottom:0;
  position:fixed;  
}

<div style="margin: 0 20px;">
     <div class="bg-image">
 
     </div>
    </div>

background image with 100% width

4 Answers4