CSS Background Image Stretching

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

CSS Background Image Stretching

Post by Pazuzu156 »

Here is what I need help with.

On my website, I have a beasting background image, but I want my image to fill the whole page. Problem solved (not really);

Here is my CSS:

Code: Select all

position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:-1;
I have my image stretch the way I want, now I want my image to stay, and not resize when the browser is resized. Any help here would be great.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: CSS Background Image Stretching

Post by Celauran »

If you want it a specific size, give it fixed values for height and width, not percentage values.
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: CSS Background Image Stretching

Post by Pazuzu156 »

I know that, but I want it to be determined by the size of their screen, how would i do that in JS?
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: CSS Background Image Stretching

Post by Celauran »

window.innerWidth and window.innerHeight
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: CSS Background Image Stretching

Post by Pazuzu156 »

Thank you
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: CSS Background Image Stretching

Post by Celauran »

My bad, I misunderstood you. That's for the size of their browser's viewport. You want screen.width and screen.height.
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: CSS Background Image Stretching

Post by Pazuzu156 »

Yeah, thats what i meant to say, but thank you for the help.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
Post Reply