Member Avatar for phpDave

Hello, I have 2 style sheets for my site, one small(760px) and one large(900px). I would like to create an image in photo shop for the header. My question is do I need to create 2 images for the 2 background sizes or can I create 1 image for both backgrounds.

Any suggestions would be appreciated, I'm fairly new to images.

  • 2 Contributors
  • 3 Replies
  • 114 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by untitledking

Dani AI

Generated

Short answer: you do not strictly need two separate header files. ’s method (making two resized images) is a straightforward fix when you need pixel‑perfect control for each stylesheet, but there are more flexible, modern approaches that reduce asset count and improve performance.

For a decorative header that can scale or crop, use a single image and let CSS handle sizing and positioning. Example (decorative background):

.header {
  background: url("header-900.jpg") center top no-repeat;
  background-size: cover; /* scales to fill the header area */
  height: 120px;
}

If the header contains important content (logo, text or a precise crop), serve appropriately sized images with responsive markup so the browser chooses the best file. Example using srcset/sizes:

<img src="header-900.jpg"
     srcset="header-760.jpg 760w, header-900.jpg 900w"
     sizes="(min-width:900px) 900px, 760px"
     alt="Site header">

Notes and quick tips:

  • Ignore the old “72dpi” rule—pixel dimensions determine on‑screen size; DPI is for print. For sharpness on high‑density (retina) displays, provide higher‑resolution variants or use srcset/density descriptors. See device pixel ratio and responsive images for details (MDN responsive images, devicePixelRatio).
  • Prefer SVG for logos/flat artwork when possible; it scales cleanly (MDN SVG).
  • Optimize file size (compress and choose the right format: JPEG for photos, PNG/WebP for transparency) and test with the browser network panel (Optimize images).

If exact composition must differ between 760px and 900px (different crops or text placement), create per‑breakpoint assets; otherwise a single well‑chosen image plus CSS or srcset usually covers both cases.

Member Avatar for untitledking

Hello, I have 2 style sheets for my site, one small(760px) and one large(900px). I would like to create an image in photo shop for the header. My question is do I need to create 2 images for the 2 background sizes or can I create 1 image for both backgrounds.

Any suggestions would be appreciated, I'm fairly new to images.

You need to change the image size on the picture to fit the style sheets. You can use the same picture, just save 2 copies of the pic. One in 760px and one in 900px. (be sure to keep the resolution the same. 72 is the recommended resolution for websites).

Edited by untitledking because: n/a
Member Avatar for phpDave

Thanks,
What do you mean the image size? Change it in photoshop or in dreamweaver? How about the canvas size?

Member Avatar for untitledking

Thanks,
What do you mean the image size? Change it in photoshop or in dreamweaver? How about the canvas size?

You change the image size in Photoshop. But do not change the canvas size at all.
Directions: 1st open your picture then go to the tab at the top named "image" go down to "image size".
2nd change the image size to the right proportions that you want it, and make sure the resolution says 72.
3rd save the image under the name you want it, then go to "file", "save as" or "Ctrl+alt+s" and save copy.
4th open copy file, after doing so, go to "image" and "image size" and change the size to what you want, and once again make sure the resolution is 72.

And I'm glad to be of help to fellow computer geeks :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.