Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: Why pics from Photoshop don't fit?

Reply
Thread Tools

Re: Why pics from Photoshop don't fit?

 
 
Gus Richter
Guest
Posts: n/a
 
      11-11-2012
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


 
Reply With Quote
 
 
 
 
Gus Richter
Guest
Posts: n/a
 
      11-11-2012
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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: Why pics from Photoshop don't fit? Ian Rastall HTML 0 11-10-2012 02:45 PM
findcontrol("PlaceHolderPrice") why why why why why why why why why why why Mr. SweatyFinger ASP .Net 2 12-02-2006 03:46 PM
pics no pics Jason Hogan Computer Support 1 02-01-2004 08:05 PM
Camcorder still pics vs digcam pics Jessica Digital Photography 4 09-26-2003 09:26 AM



Advertisments