CODEWITHSUNDEEP
htmlcss
henhen
henhen

Reputation: 1205

background image not taking up full width

I am currently positioning a background image that is small in height but large in width to stretch all the way across the browser. I am only able to achieve this when I do background size cover, but not when I set a certain size to the image other than cover. I tried background repeat-x but that does not seem to work either.

<html>
  <body>
    <div class="background">
      <div class=“header”></div>
      //some content
    </div>
    <footer><footer/>
  </body>
 </html>

CSS

.background {
    background-image: url(some image);
    background-size: //tried cover and it works but not when I set it to width 100% or something like 2800px
    background-repeat: repeat-x;
    background-position-y: bottom;
}
html, body, .background {
    height: 100%;
}

Upvotes: 2

Views: 12374

Answers (5)

Codemaker2015
Codemaker2015

Reputation: 1

Just add background-size: cover code in css will resolve the issue.

.background {
    background-image: url(some image);
    background-size: cover;
    background-repeat: repeat-x;
    background-position-y: bottom;
}
html, body, .background {
    height: 100%;
}

Upvotes: 3

Mujeeb Ishaque
Mujeeb Ishaque

Reputation: 2701

Not very related to this question but I hope this answer will save someone's time

For the people who are using bootstrap. Keep the image inside a container, check again if it is inside class="container", I had a typo, I wrote classs instead of class and the background image wouldn't fit.

Second, close previous divs.

Third, if you don't use container and start with just <div class='row'></div>, background image won't fit.

Working Example:

<div class="container" style="background-image: url('img'); background-size: cover;">
  <div class="row">
  </div>
</div>

Upvotes: 1

MD.ALIMUL Alrazy
MD.ALIMUL Alrazy

Reputation: 330





    html, body{
      height: 100%;
    }
    body { 
    			background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
    			background-position: center center;
    			background-repeat:  no-repeat;
    			background-attachment: fixed;
    			background-size:  cover;
    			background-color: #999;
      
    }

    div, body{
      margin: 0;
      padding: 0;          
    }
    .wrapper {
      height: 100%; 
      width: 100%; 
    }


    <div class="wrapper">
      <div class="message"></div>
    </div>

Upvotes: 0

Khushbu Vaghela
Khushbu Vaghela

Reputation: 619

It is working with background-size:100%;

.background {
background-image: url("marakele-elephant1.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position-y: bottom;

}

Upvotes: 0

nicktu12
nicktu12

Reputation: 129

I'm curious if the CSS unit vw (view width) will accomplish what you are trying to do with width: 100%

Instead of width: 100%, try width: 100vw

https://www.w3schools.com/cssref/css_units.asp

Upvotes: -1

Related Questions