scale background image in div depending on screen size

Question

I have a div containing a background image that I want to keep aligned in the bottom right corner but I want the image to scale depending on the size of the browser window. What I currently have is:

backgnd {
    background: url(img/roneggler.png) no-repeat;
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 1000px;
    height: 1000px;
}

I have tried to set the width and height values to 100% but that messes with the position of the div. The link of this page can be found here: http://inetgate.biz/ron.eggler/

ScaisEdge · Accepted Answer · 2017-02-11 15:38:19Z

1

You should use background-size: cover and width and height 100%;

backgnd {
    background: url(img/roneggler.png) no-repeat;
    position: absolute;
    background-size: cover;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}

edited Feb 11, 2017 at 15:38

answered Feb 11, 2017 at 15:26

ScaisEdge

133k10 gold badges98 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

stdcerr Over a year ago

If I use what you suggest, the image isn't bottom aligned.

ScaisEdge Over a year ago

Try using position aboslute (instead of fixed ) ..and eventually set the proper bottom right position

stdcerr Over a year ago

Yeah, I'm using absolute as you suggested above. It looks like the div scales nicely but the background image doesn't stay aligned absolute to the bottom right corner of the div. I added a temporary border: 5px solid red; to the div to better depict things

ScaisEdge Over a year ago

you should post a link to jsfiddle for or codepen for see the page and the code ..

user3863196 · Accepted Answer · 2017-02-11 15:25:47Z

0

CSS:

.container{
  width:100%;
}

you can use jQuery:

var w = $(window).width();
$('.content').css('width', w);

answered Feb 11, 2017 at 15:25

user3863196

Comments

stdcerr · Accepted Answer · 2017-02-11 16:00:24Z

0

Okay,

I got it now, the final solution looks like:

.backgnd {
    background: url(img/roneggler.png) no-repeat;
    background-size: contain;
    background-position: right bottom;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}

The trick was t use background-size: contain; instead of cover to not get the image to scale up all the way on big screens.

answered Feb 11, 2017 at 16:00

stdcerr

16k29 gold badges84 silver badges142 bronze badges

Collectives™ on Stack Overflow

scale background image in div depending on screen size

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related