CODEWITHSUNDEEP
htmlcss
ranopano
ranopano

Reputation: 539

How do I get my background image to not be cut off at the bottom?

I have a large background image that is fixed with text being displayed on top of it, however the bottom of the image is being clipped off. I want the image to be displayed completely and not be cropped off.

 #content {
            background-image: url(../images/bean.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
            background-attachment: fixed;
            height: 40em;
            margin-top: 0;
            padding: 0;}

Upvotes: 2

Views: 11868

Answers (6)

CMJR
CMJR

Reputation: 19

You could also modify your background as such:

  background: url(xyz.jpg) no-repeat **center center** fixed;

where you change the center values as needed (left,right,bottom,top). Depending on the image it may be useful.

Upvotes: 0

user7957436
user7957436

Reputation: 1

.bg_care{
        background-image: url(../img/care-area.jpg);
        background-size: cover;
}

just use background-size as cover it wont cut off.

Upvotes: 0

SaidbakR
SaidbakR

Reputation: 13544

Set background-size to be 100vw 100vh i.e background-size: 100vw 100vh;

#content {
            background-image: url(http://lorempixel.com/1400/1400/sports/3/);
            background-repeat: no-repeat;
            background-size: 100vw 100vh;
            background-attachment: fixed;
            height: 40em;
            margin-top: 0;
            padding: 0;}

Checkout this DEMO: http://jsbin.com/buqaju/1/

Upvotes: 5

tru
tru

Reputation: 117

you have

background-size:100%;

use 

background-size: 100% 100%;

Upvotes: 0

Jonas Grumann
Jonas Grumann

Reputation: 10786

To have the background always cover the whole container you can use:

background-size: cover;

Source: http://css-tricks.com/perfect-full-page-background-image/ Pay attention to browser support: http://caniuse.com/#search=background-size (hint: No IE8)

Also, I noticed it's not very performant on pages with a lot of transparencies and moving backgrounds, but other than that I use it quite a lot and it works well.

Upvotes: 2

Matthew Felgate
Matthew Felgate

Reputation: 166

Increase the height?

height: 100em;

Upvotes: 0

Related Questions