Member Avatar for Makcarov

how to make the background picture as a whole page?... because when i create a background pic from photoshop and adjust to 550 height and 1000 weight(in piexels) it didn't fit to the screen of the monitor.

  • 6 Contributors
  • 6 Replies
  • 99 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by shironui

Dani AI

Generated

A 550×1000 image will not reliably "fill" a modern viewport — monitors and phones have many different sizes and aspect ratios. Two practical approaches are: scale-and-crop (image fills the viewport and excess is cropped) or scale-and-fit (whole image is visible but you get letterboxing). For full-page backgrounds most sites use scale-and-crop while serving appropriately sized files for different devices.

A robust, progressive approach is to place the art as an absolutely/fixed positioned <img> that fills the viewport and uses CSS to preserve aspect ratio. This keeps the image from stretching, lets you control focal point, and makes responsive source selection straightforward.

HTML and CSS example (use your own filenames):

<img src="bg-1920.jpg"
srcset="bg-480.jpg 480w, bg-800.jpg 800w, bg-1920.jpg 1920w"
sizes="100vw"
class="page-bg"
alt="">

<style>
html,body { height:100%; margin:0; }
.page-bg {
position:fixed;
top:0; left:0;
width:100vw; height:100vh;
object-fit:cover;
object-position:center;
z-index:-1;
pointer-events:none;
}
</style>

Serve multiple sizes via srcset/sizes (or <picture> for AVIF/WebP) so small devices download small files. Create at least a 1920px version for desktops and a 2x asset for retina if needed. Compress and test with tools like Squoosh to balance quality and bytes. For behavioral quirks (mobile browsers sometimes treat fixed backgrounds differently), see the notes on background-attachment and related browser behavior. For implementation details read the object-fit and responsive images guides on MDN: object-fit on MDN and Responsive images on MDN.

Notes on this thread: pointed at modern CSS and correctly warned about distortion — the object-fit method preserves aspect ratio while filling the screen. and showed shorthand background approaches; those are fine but can behave inconsistently on some mobile browsers, so test across devices.

Recommended Answers

All 6 Replies

Member Avatar for shaya4207

In your CSS by the tag that you want the image to be add background: url('your_image.file');width 100%; height: 100% , just keep in mind that the image might get distorted on different screen sizes

Member Avatar for Bestwebdesign

Hi,
Type this command in your CSS

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
Edited by Bestwebdesign because: mistake
Member Avatar for shaya4207

Hi,
Type this command in your CSS

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

I'm sorry, but IMHO it's wrong to tell somebody to use CSS3 (especially with hacks) until it's widely supported, which at this point it isn't

Member Avatar for johnsteve.bravo

Simply use the following css

body
{
background-attachment:fixed;
background-image:url('folder-name/image-name.jpg');
background-repeat:no-repeat;
}

Member Avatar for gracyj

You can learn and search for your doubts in w3schools.com . It provides very good edit options where we can try our own programs.

Member Avatar for shironui

Simply use the following css

body
{
background-attachment:fixed;
background-image:url('folder-name/image-name.jpg');
background-repeat:no-repeat;
}

a little simpler to just do

body{
background: image:url(folder/image) fixed no-repeat;
}

less is more.

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.