My Image is not taking up full width of page

Question

For some reason my image is not taking up the entire width of page. I commented out my entire site.css file besides the #ResterauntImage code.

Picture Below :

#ResterauntImage {
    position: absolute;
    left: 0;
    top: 0;
  
    height: 400px;
    width: 100%;
    background-size: cover;
    padding: 0px;

    background-image: url("");
    overflow: hidden;
    /*-webkit-filter: grayscale(100%);*/
    /*-webkit-filter: sepia(100%);*/
    -webkit-filter: blur(2px);
}

  
  
  <img id="ResterauntImage"class="img-fluid" alt="Responsive image" src="http://www.gatesgardencentre.co.uk/wp-content/uploads/gn043-MED-WIDE.jpg" />

It's working for me - in both Chrome and Firefox. Some things: Add a space between `id="ResterauntImage"` and `class="img-fluid"`. You're setting `position` to `absolute` and you're then overriding it immediately with `relative`. `` tags shouldn't really have background images (it's valid CSS, but why?). What is it that you are trying to achieve? Is this image supposed to cover the entirety of the window? — James, May 02 '18 at 17:39
You have `position: absolute` which totally depends on its parent with `position:relative`. So you might want to check width you are getting of parent first having *`position: relative`*. If that is wide enough, your image must also have it. — divy3993, May 02 '18 at 17:39
@divy3993 `position:absolute;` is actually overridden by `position: relative;` in the same selector — James, May 02 '18 at 17:40

Jakub Muda · Accepted Answer · 2018-05-02T17:48:55.083

2

I removed height of the image and it's working perfectly. The image now has 100% width. If you specify a width:100% there is no need to specify a height of an image as the browser will calculate it based on the ratio of the image (the default value for height is auto).

I removed some other tags like background-image, background size, padding and position:relative as you already have position:absolute in your code. I left only required code to make your image with 100% width.

I hope this solves the problem. I checked and in working on my page.

Here is the code:

#ResterauntImage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

<img id="ResterauntImage"class="img-fluid" alt="Responsive image" src="http://www.gatesgardencentre.co.uk/wp-content/uploads/gn043-MED-WIDE.jpg" />

edited May 02 '18 at 17:48

answered May 02 '18 at 17:40

Jakub Muda

6,008
10
37
56

doesnt help, Still not full width – Curious-programmer May 02 '18 at 17:42
1

Run the code snippet. It takes 100% of the width of the screen. If it doesnt on your page it means you have conflict with other css code. – Jakub Muda May 02 '18 at 17:46
worked for me. I had earlier set `width` attribute to `inherit`. Changing it to `100%` worked. – RBT May 09 '21 at 08:04

Rafik · Answer 2 · 2018-05-02T17:41:05.803

The problem was that you were specifying position twice, once as position: absolute and that's what it should be and once as position: relative, which is not what you want. For more information and difference between postion: absolute and position:relative check this and this.

#ResterauntImage {
    position: absolute;
   left: 0;
    top: 0;
    /* this is false! position: relative;*/
    height: 400px;
    width: 100%;
    background-size: cover;
    padding: 0px;

    background-image: url("");
    overflow: hidden;
    /*-webkit-filter: grayscale(100%);*/
    /*-webkit-filter: sepia(100%);*/
   -webkit-filter: blur(2px);
}

  
  
  <img id="ResterauntImage"class="img-fluid" alt="Responsive image" src="http://www.gatesgardencentre.co.uk/wp-content/uploads/gn043-MED-WIDE.jpg" />

My Image is not taking up full width of page

2 Answers2