"Ideal" Size for Fixed Background Image?

User 1627699 Photo


Registered User
3 posts

Hi there,

I'm trying to size an image ~ that I want to use as a fixed background ~ so whatever a viewer's monitor size, the image will consistently "fill" the screen from left-right/top-bottom without distortion. Is that possible? If so, what is the "ideal" pixel width/height for an image, please?

I'm using this code (below) but while my pc's monitor shows exactly what I'm trying to achieve, on my laptop the image is only 3/4's as wide as the screen so the block of content (on the right side) has solid green behind it instead of the image.

body { background-image:url('kids1.jpg');
background-attachment: fixed;
background-color: green;
background-repeat: no-repeat;
background-position:center;}

I thought, also, that if I could figure out/find the recommended ideal size and what's "best" is to make the image "X" size large and center it on the screen and then have the background color fill in that that would be cool. But I don't know quite how to do that...

Any help you might offer will DEFINITELY be appreciated as I'm really frustrated by my ignorance right now.

Thank you SO much!!

G.
User 364143 Photo


Guest
5,410 posts

You can not make a background image stretch to fill a screen. You can make it repeat to fill the screen. If you want to use one big image, you will have to make it big.

background-position:center top;

http://www.w3schools.com/css/css_background.asp
CoffeeCup... Yeah, they are the best!
User 117361 Photo


Ambassador
6,076 posts

Gayle
To understand better what Tom has explained here, go and visit a few web sites and right click in the background area, outside the main central part of the site containing all the content. From the dropdown menu that will pop up, choose "view background image". A separate page should open up with just the background image on view. You can see that many sites use the method he describes and will have only a very small image that will repeat itself many times to create the background.
User 184085 Photo


Ambassador
1,707 posts

Try this link it demonstrates stretching a picture to 100% size of the browser window

http://css-tricks.com/perfect-full-page-background-image/
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 289442 Photo


Registered User
161 posts

david wilson wrote:
Try this link it demonstrates stretching a picture to 100% size of the browser window

http://css-tricks.com/perfect-full-page-background-image/


Neat. I have one site I think might be suitable for this. Thanks for the link.

Th
User 364143 Photo


Guest
5,410 posts

That's pretty spiffy, David. Thanks for sharing. :)
CoffeeCup... Yeah, they are the best!
User 1627699 Photo


Registered User
3 posts

david wilson wrote:
Try this link it demonstrates stretching a picture to 100% size of the browser window

http://css-tricks.com/perfect-full-page-background-image/



Oh my gosh! this is so cool!!!! THANK YOU VERY MUCH!!!
User 193638 Photo


Registered User
557 posts

This may also help. But it would be nice if someone that knows more than I do (all of you :D ) could check it out and tell us if it will work with, let's say SCCP.

http://www.buildinternet.com/project/supersized/
User 364143 Photo


Guest
5,410 posts

JQuery is JavaScript. I believe Jo Ann and Scott have both said JavaScript is not support in the cart. Someone else said they got scripts working. So I guess it might work but is not supported. The JQuery plugin is free so what do you have to lose?
CoffeeCup... Yeah, they are the best!
User 193638 Photo


Registered User
557 posts

Thanks Tom.
It looks to me like it has a lot of potential for outputting some interesting ideas. Watching the demo got me to thinking of ways I could use it on my site. If it works, of course.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.