Member Avatar for Erek4

OK, after a few hours and some Internet research I think I found a way to spread an image across my page. Let me know what you guys think.

My CSS:

#body              {
                        background-image: url(my image url);
                        background-attachment: fixed; 
                       }

1) I noticed that the image only fills in 3/4's of the page so what I did was put a few <br />'s so it would fill the page and walaa!! Is this bad practice? Would it work across different browsers?

2) Also, my image is 1024 x 731. How do I compress it and still have the same look, quality and the way it is viewed on the page?

3) I found that I like the look of some of the images that are oversized (meaning that only a portion of it is showing). Is there a way I can keep this look while compressing the image?

At your convenience,

Erek

Edited by mike_2000_17 because: Fixed formatting
  • 3 Contributors
  • 7 Replies
  • 207 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by efaith77

Dani AI

Generated

A few practical points to stop the <br/> hacks and get a full, well-compressed background that keeps the “oversized / cropped” look you like.

Apply the background to the page root and make sure the page actually fills the viewport (that’s why your image covered only ~3/4). Example setup that avoids layout gaps and scales the image to cover the screen while preserving aspect ratio:

html, body {
  height: 100%;
  margin: 0;
}

body {
  background-image: url("/images/b2.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; /* fills viewport, may crop edges */
}

Notes on the cropped/oversized effect and positioning: background-size: cover is what creates the large, cropped look — it scales until the viewport is filled. Use background-position to pick which part of the image is visible; if you need precise framing, crop the source image to that focal area before use.

Image filesize and quality tips: resize to a sensible maximum (e.g. ~1920px wide for desktop hero images), then export with quality tuned (start around 60–80% for JPEG) or use modern formats (WebP/AVIF) where supported. Produce a small mobile variant and swap it with a CSS media query so phones don’t download a huge desktop image. If you need resolution switching, serving different background files via media queries is the way to go; if you switch to an actual <img> background you can use srcset and object-fit: cover for easy responsive behavior.

Practical gotcha: background-attachment: fixed can behave poorly or be ignored on some mobile browsers — set background-attachment: scroll for small screens via a media query. As suggested, cropping and positioning solve most framing issues; thanks to for pointing to further reading resources.

Recommended Answers

All 7 Replies

Member Avatar for macneato

Hi Erek,

Why would you have line breaks to position an image? Just use something along these lines;

#body {
background: url(my image url) center center fixed;
/*Other possible values include: top,right,bottom and left*/
}

That's the biggest issue with using lage images as backgrounds, use a photo editing application to find out what format and output quality sorts your purpose best.

As for your last question, if you just like that portion of the image showing, crop it accordingly and position it where you like it to be displayed.

All the best,

commented: Very helpful and understanding to newcomers +1
Member Avatar for Erek4

Magneato, thanks for the tip and your patience, I will try this out. I will crop the image and size it accordingly and see how this works.

(Previously, I used the line break to lower the image to the bottom of the page, if I didn't it would show some white space at the bottom instead.)

The image format for my background is a jpg. from psdrockstar.com.

Member Avatar for Erek4

I did what you said by adding the followind in my css: background: url(../../images/b2.jpg) center center fixed; I cannot, however, spread the image across the page for some reason. Also, what is a good height and width for a background image in the css?

Member Avatar for Erek4

Hi Erek,

Why would you have line breaks to position an image? Just use something along these lines;

#body {
background: url(my image url) center center fixed;
/*Other possible values include: top,right,bottom and left*/
}

I used the background: url() center center fixed;
I now need to spread the image from the center to the edges of the website (webpage). Is there an easy way to do this?

Erek

Member Avatar for Erek4

James this is great! I will implement this into my site.
Thanks a lot!!!
Erek

Member Avatar for efaith77

Glad to help

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.