CODEWITHSUNDEEP
jquerycss
PT Desu
PT Desu

Reputation: 693

keep background image centered

Ok, so I am trying to mimic Googles homepage. What it seems is that even with small image Google stretches it to fit in and does not overfill it that much. I tried using background-position but it may look good for some image but looks like crap for others. So my question is how would I be able to pull this trick with the use of jQuery?

ok here is the css which i am using atm

background-repeat: no-repeat;
background-size: auto;
background-clip: border-box;
background-origin: padding-box; 
background-attachment:scroll; 
background-position: 0px 28%;
position: fixed;
z-index:-10;

and div style in the page which uses css class above as its on style to display image in background

<div style="display: block; opacity: 0.99999; width: 1600px; height: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; background-image: url(<?php echo base64_decode($_COOKIE['phx_utmc_session']); ?>);" id="phx_utmc_background"></div>

There might be some problems with using width as height in the div portion but I am not sure since without height it wont work.

So ye ^^

Upvotes: 0

Views: 4178

Answers (2)

Raynos
Raynos

Reputation: 169401

As mentioned, this can be accomplished with CSS

Try

body {
   background: url('http://placekitten.com/200/300');
   background-position: center 0%;
   background-repeat: no-repeat;
}

Live link

Upvotes: 3

dockeryZ
dockeryZ

Reputation: 3981

have you tried just using CSS

body {
   background: url('background.png') no-repeat center right 40% 0 transparent;
}

Though I haven't tested that, it seems you could accomplish this with CSS.

Upvotes: 1

Related Questions