Webpage Alters On Different Screens

[Codarz360]

Hello,

 

I'm developing a user system and I'm currently working on the login page as this is where I've started from. I've created a background for the website in Photoshop and used the background: property in CSS to make the background show up on the page.

 

I've managed to get this to fit perfectly on my monitor but when I go to check it at a laptop or another computer with a different size screen it's not showing up correctly and I just can't work out why. I've tried setting the background-size to 100% but still no help.

 

I've searched google but couldn't really explain what I wanted it to do to the search engine.

 

Any help is appreciated as always.

[cssfreakie]

Hi Codarz,

 

This is quite a difficult thing really, because i assume you are using a background image on your body right?

There are several ways to this, but you should before designing something realize that people have different screen sizes.

Because of that it's pretty much impossible to make a background image (on the body) look the same on all screens.

Also, what you didn't provide is how you tried it. Is the image stretched or does it stay the same size?

 

Do you have it online somewhere so i can have a look? There are quite some ways to do this, although they all depend on the end user.

 

Some ways to think about/ play with:

 

Set html, body {height:100%; width:100%;}

and place an image in the mark-up and set the height to 100%;

 

make a div the size of the window, and set the image fixed 50% 50%

background: url('image.jpg') fixed no-repeat 50% 50%;

 

Or google for background image 100% in case you want to stretch it.

[Codarz360]

Hey cssfreakie,

 

Thanks for replying to the problem that I'm currently having. I was trying to not use the background image on my body as all that done was then cover up the login form that I had created. I've tried a numerous amount of ways such as:

 

<img src="BG.jpg" width="100%" height="100%" style="position:fixed;left:0px;right:0px;z-index:-1;background-repeat: no-repeat;" /> 

 

background-image: url(BG.jpg);

background-size: 100%;

 

background-image: url(BG.jpg);

 

All of these are just not working in the way that I would like them too. I wanted the login form to be exactly in the middle of the screen with the header at the top perfectly aligned with the title and the footer at the bottom with the text aligned correctly. I don't tend to develop projects online I tend to do them on my MAMP firstly then upload them to a web server.

 

I will upload the files required to a web server now and send you the address so you could take a look. I will PM you the address within the next few minutes.

[cssfreakie]

I'll have a look. and say what i would do.

Note though: i see you use in line style, it's a bad practise!

 

 

And yeah i design off-line too, but for css and layout, some visual reference is pretty vital