Why pics from Photoshop don't fit?

MrBean

unread,

Nov 10, 2012, 1:13:32 AM11/10/12

to

I have a pic - http://www.zbawienie.com/images/backgrounds/stars.jpg

and a test page - http://www.zbawienie.com/test-pic.htm

Pic has dimensions - 1,150px в 288px

While a header is 960 x 200 px.

When I change header to 288 px as an image is, an image appears to be
smaller.

Just have found one problem. The pic is in reality 96px/inch but I've
save it as 72px.

Any idea what's wrong!?

MrBean

unread,

Nov 10, 2012, 1:36:33 AM11/10/12

to

So far I have found that my old CS3 making 96 px/inch while telling me
it's 72px/inch.

Correct reading I have in Paint.net

MrBean

unread,

Nov 10, 2012, 1:49:00 AM11/10/12

to

Found 2 problems.

1. Photoshop CS3 is stuffing up.

2. Padding in #header makes a problem as well.

:)

Sorry to bother you, guys and gals!

Ian Rastall

unread,

Nov 10, 2012, 9:45:21 AM11/10/12

to

On 11/10/2012 1:13 AM, MrBean wrote:
> I have a pic - http://www.zbawienie.com/images/backgrounds/stars.jpg
>
> and a test page - http://www.zbawienie.com/test-pic.htm
>
> Pic has dimensions - 1,150px в 288px
>
> While a header is 960 x 200 px.
>
> When I change header to 288 px as an image is, an image appears to be
> smaller.

When I take your image and resize it (while keeping the aspect ratio) I
get an image that's 799 x 200. Or, if I want to make the width correct,
I can resize it to 960 x 240. But either way, if you want to fit your
image into 960 x 200, you'll have to do some cropping.

I think you mentioned Paint.NET. In that program, when you choose to
create a rectangle, for cropping purposes, set its ratio at 960 x 200.
This will ensure that the box is the right size. Then crop your image,
and resize to 960 x 200.

> Just have found one problem. The pic is in reality 96px/inch but I've
> save it as 72px.

That has to do with printing. If you were printing this image, then it's
important to know what the pixels per inch are. But not on the web. It
just changes the size of the file.

--
Ian
http://bookstacks.org/

Gus Richter

unread,

Nov 11, 2012, 2:31:45 AM11/11/12

to

On 11/10/2012 1:13 AM, MrBean wrote:

> I have a pic - http://www.zbawienie.com/images/backgrounds/stars.jpg
> and a test page - http://www.zbawienie.com/test-pic.htm
> Pic has dimensions - 1,150px в 288px
> While a header is 960 x 200 px.
> When I change header to 288 px as an image is, an image appears to be
> smaller.

1. I'm assuming that you *don't* have a good reason to use XHTML, since
you are serving the page as text/html. Get rid of XHTML and use HTML.
You also have errors for XHTML 1.0 ( also see Appendix "C") requirements.

3. I don't fully understand what you think your problem is, but if I
change #header to height:288px then it is tiled vertically. This is
because in your Quirks Mode your padding of 20px (all 4 sides) for
#header is what is causing this. Remove this from your dkblue.css when
in Quirks Mode.

3. I'm assuming that you are creating a *new* page and therefore you
should *not* be using a Transitional Doctype (you are requesting Quirks
Mode response from all browsers viewing the page). Use Standards
Compliant Mode (Strict Doctype) like so: <!doctype html>

See the difference when you change the stylesheet changes below by
changing content-box to border-box and padding-box . To see the
affect add/change the padding/border settings to #header . The 20px
padding for #header in your dkblue.css will increase the image size
per the box model beyond the overlaying text if using padding-box .

4. Try out these (see http://caniuse.com/background-img-opts for
support (for IE9+ only)) for *flexible layout* (for the #header portion
only with random values chosen). Replace the former in your embedded
styles and add the latter, which will override/replace the one in
dkblue.css :

#header { /*height: 200px;*/ margin-top: 20px; margin-bottom: 20px;
height:288px;
background-image:url('images/backgrounds/stars.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
/* border-box retains box size with image under the
border to the outer border edge whereas padding-box
will increase the box size with padding increase and
also the image size. */
}
#container {max-width:1020px; min-width:500px; width:auto; margin:0 7%; }

--
Gus

MrBean

unread,

Nov 11, 2012, 5:58:02 AM11/11/12

to

I'm aware of padding 20px in header.

However the problem was CS3 was saving picture in jpg as 96 px/inch so
size wasn't as it would be in 72px/inch.

I have found THAT problem. If you will check the pic - it's in 96, not 72.

So far it works fine in few browsers.

http://www.zbawienie.com/faryzeusze.htm

However the pic is still wrong size.

:-)

MrBean

unread,

Nov 11, 2012, 6:40:00 AM11/11/12

to

On 11/11/2012 6:58 PM, MrBean wrote:

> http://www.zbawienie.com/faryzeusze.htm

Wow! Validated!

My code is perfect, just script from webhosting.yahoo data is screwed!

Gus Richter

unread,

Nov 11, 2012, 11:46:43 AM11/11/12

to

On 11/11/2012 5:58 AM, MrBean wrote:
> http://www.zbawienie.com/faryzeusze.htm
> However the pic is still wrong size.

I still don't understand what you mean by "wrong size".

With the height of #header set to 200px, a bottom portion of the
background image is clipped. The height for #header, if set to 288px,
will show the full height of the image, but due to the 20px padding for
#header will show a portion of the next tiled image below it. By
removing the 20px padding *or* by changing the height of #header to
240px, the single full height of the image is shown.

You are using a background image and the width of #header is not wide
enough for the image, therefore it is clipped on the right side. Use the
1150px width of the background image for #header instead of 1020px,
*or* use background-size *or* use an image rather than a background
image with "fit-to-size".

--
Gus