CODEWITHSUNDEEP
asp.netcss
Ali_dotNet
Ali_dotNet

Reputation: 3279

centering big image in ASP.NET page

I use VS2010/C# to develop an ASP.NET web app, I've used a big background image for my page (it is 1400x1100), I want this background to be centered and screen-fit in all resolutions, for instance if resolution is 1280x1024, image width should fit to this smaller width, also it should always be centered (horizontally), how can I achieve it?

thanks

Upvotes: 1

Views: 883

Answers (3)

ahmedsaber111
ahmedsaber111

Reputation: 822

you can manipulate with CSS 3 media query

code can go like this:

@media screen and (min-width: 1024px){

.div{background:url(''); width:###px;}


}
@media screen and (max-width:1023px){

.div{background:url(''); width:###px;}

}

and to use it with all browsers you can use a jquery library to make supported with all browsers

Upvotes: 1

Shadow Wizard
Shadow Wizard

Reputation: 66389

Resizing background image is possible with pure CSS, but requires browser supporting CSS3 - in short all "modern" browsers plus IE9 and above, meaning no pure CSS way for IE8 or less.

To have cross browser solution including IE8 you have to use JavaScript.. using jQuery you already got pretty much plugins available, one of them that looks like exactly what you need is this:

Upvotes: 1

Aristos
Aristos

Reputation: 66641

One simple idea with out javascript...

<div style="position:fixed;z-index:2;">
 content here
</div>

<div style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;">
    <img src="/img/YourBigImage.jpg" height="100%" width="100%" />
</div>

The idea is that I place one div over the other. The background div is set to full page and the image set to fit this size using the 100% as height and width. I test it and work for me, but I do not know what happends with your content, if the content is too big or complicate, how the background div will be fit.

Upvotes: 3

Related Questions