Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Re: Why pics from Photoshop don't fit? (http://www.velocityreviews.com/forums/t954410-re-why-pics-from-photoshop-dont-fit.html)

Gus Richter 11-11-2012 07:31 AM

Re: Why pics from Photoshop don't fit?
 
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



Gus Richter 11-11-2012 04:46 PM

Re: Why pics from Photoshop don't fit?
 
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




All times are GMT. The time now is 01:29 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.