CODEWITHSUNDEEP
htmlcssbackground-imagescale
stdcerr
stdcerr

Reputation: 15608

scale background image in div depending on screen size

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/

Upvotes: 0

Views: 2088

Answers (3)

stdcerr
stdcerr

Reputation: 15608

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.

Upvotes: 0

ScaisEdge
ScaisEdge

Reputation: 133370

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%;
}

Upvotes: 1

user3863196
user3863196

Reputation:

CSS:

.container{
  width:100%;
}

you can use jQuery:

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

Upvotes: 0

Related Questions