CODEWITHSUNDEEP
csshtmlbackgroundwidth
Prasanna
Prasanna

Reputation: 2641

Fitting image size across screen resolutions

I have a div tag like

<div id="MainMenu1" dojotype="dijit.layout.ContentPane"></div>

This div is associated with a css like

#MainMenu1 
{
height:53px;
background: url(../images/top_banner.png) no-repeat;
background-position:center;
margin:auto;
width:100%;
border:0;
}

I see that the background image is fine on a smaller screen but on a wider screen, it occupies only the center position. I want the image to occupy the full screen even on wider screens and I do not want the image to "repeat". How would I do this?

Upvotes: 0

Views: 2654

Answers (2)

edwoollard
edwoollard

Reputation: 12335

#MainMenu1 
{
height:53px;
margin:auto;
width:100%;
border:0;
background: url(../images/top_banner.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Try this. It works perfectly for me. It should fit the background perfectly in the center and reasonably stretch it to whatever screen size the website is being viewed on.

Upvotes: 1

James Coyle
James Coyle

Reputation: 10398

You can either let the image repeat meaning it covers the whole space or use background-size: cover which will scale it to cover the whole area while keeping the original aspect ratio of the image.

Upvotes: 0

Related Questions