PDA

View Full Version : CSS style -- image to resize with browser without distorting


alimac
05-10-2012, 09:21 AM
Hi, I've been trying to figure out how to do this and I can't get it to work, so was hoping someone could offer a bit of help!

I am trying to have images fill to browser window and to resize with the size of the window, but not to distort the image.

Here is an example of how it's done perfectly:

http://matthewhilton.com/tables/hal/

I'm not much good with code, you can view the source of that page.
Is the image inside a Div?

I have tried a basic:

background-position: 0px 0px;
margin: 0px;
padding: 0px;
height: inherit;
width: 100%;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;
position: fixed;
z-index: -1;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
.bg {
overflow: hidden;
z-index: -1;
position: fixed;
height: 100%;
width: 100%;
clear: both;
float: right;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
visibility: visible;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
vertical-align: 100%;

which so nearly does it, but the image distorts to fill the whole window, rather than hiding the overmatter as it does in Matthew's site.

You can see my attempt on this page here: http://www.alisdairmacdonald.co.uk/

Any tip on where I've gone wrong? It's driving me mad.

Thanks, Alisdair

gentleone
05-10-2012, 09:57 AM
This is your image in the HTML:
<img src="images/home-03.2012.jpg" width="1517" height="1000" class="bg" />
Firstly you'll need to delete the width and height attributes, because otherwise you will get the scrollbar and the image doesn't keep its aspect ratio, so you'll get this:
<img src="images/home-03.2012.jpg" class="bg" />

Then in your CSS you need to do this:

.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: -1;
overflow: hidden;
}


You can do it also with the new CSS3 property, background-size, but this is not supported in IE8 and below, so if you want to use it then you will need to create a fallback solution (such as the one above). But... this might be a bit too much for you.
Anyways here's the CSS3 version:

body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #EEE url(images/home-03.2012.jpg) 0 0 fixed;
background-size: cover;
}

alimac
05-10-2012, 11:59 AM
Wow, that was easy!

Thanks so much. It works great.

http://www.alisdairmacdonald.co.uk/testerpage1.html

So is it the "0 0 fixed" bit that does it?
(I'm not bothered about the people still on IE8 and below. I'm not even bothered about those using IE!)

gentleone
05-10-2012, 03:20 PM
I'm not bothered about the people still on IE8 and below. I'm not even bothered about those using IE!
Well, it's up to you to not support browser with still the largest piece of the browser pie ;)

alimac
05-10-2012, 09:36 PM
I know. I'm a Mac user ;)

Corrosive
05-11-2012, 11:10 AM
I'm not bothered about the people still on IE8 and below. I'm not even bothered about those using IE!

Lol. Thanks, your refreshing attitude to crap browsers has brightened my day :)

alimac
05-14-2012, 08:17 AM
Hi again!

After sorting out this CSS image thing I have another question.

With pages where the only thing to change through the links is the background image, it should be set so that rather than linking to a new html page, the background image changes on the same page, I would think?

So if you look here: http://www.alisdairmacdonald.co.uk/musings.html
by clicking next it currently takes you to another page that has another image. Is there a way of setting links so that it keeps you on the same page but changes the image only? Would I have to have a link for each image change? or would it be possibly to change with a 'next' link to each new image? (see also this (quite rough) example: http://www.alisdairmacdonald.co.uk/yourunicef.html clicking the 1, 2, 3, would just change the background image not the whole page.) this would also allow me to fade or add some other property to the image change I guess...
Hope this makes sense. Would be grateful if you could point me in the right direction. If it's not really possible without adding complicated scripts or something then don't worry about it, it's not a problem as it is now, it just means that I'm going to end up with a massive amount of pages!

Thanks again

Corrosive
05-14-2012, 11:14 AM
I'd just stick to individual pages if I were you. Seeing as you don't care about crap browsers you could look into; http://tympanus.net/Tutorials/CSS3PageTransitions/ to give it something a bit different. Will work in Safari :)