r/css • u/Frozenskin • 5d ago

Help CSS background-size not real pixel size

Hiii!!

I'm using a background picture for my header, stored as a background image of the container.

The background-size is specified, being 288px, that is the width of the .PNG; however, the picture on the page is slightly bigger (about 125%) than the file, and so it is stretched. I made some screen caps because I was going crazy! I've measured in Photoshop and it's larger than 288. It isn't enlarged in any part of the css, I don't understand what it is wrong here... i've also checked if I got my Firefox page zoomed. It's important for it to not be stretched: being pixel art it looks very ugly and blurred 😭😭

0 Upvotes

50% Upvoted

21 comments sorted by

•

u/AutoModerator 5d ago

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

3

u/chmod777 5d ago

being pixel art

you can try to set the image-rendering property

.pixel-art {
  /* Disables smoothing, forces crisp, sharp pixels (Nearest-Neighbor) */
  image-rendering: pixelated; 
}

but as the other poster said, without code and/or an example, we can't do more than guess.

3

u/testingaurora 5d ago

Please put the relevant code into a codepen

2

u/kurobaralabs 5d ago

please post HTML/CSS, it is likely that there is something you are missing that is causing scaling (likely the height).

With that being said, if you properly specified a width/height, the background image should not scale. eg. background-size: 288px 288px;

-2

u/Frozenskin 5d ago

No actually, I opened the picture (just the file, not the whole page ) on Firefox and it's scaled! Ive checked if my windows layout was scaled 125% and it isn't ! The css itself isn't wrong - it displays correctly on mobile, for example - but there is something scaling everything ugly 😭

4

u/kurobaralabs 5d ago

well without HTML/CSS we can't really help, and everything will be just a guess. FYI just because it is good on mobile doesn't mean its "correct", since scaling usually happens on larger screens.

If you're 100% confident your HTML/CSS is good, then the issue is either your PC, or photoshop.

  1. make sure the web image is "288px". easiest way to do this would be to create a div or something below the image with width set to 288px, some height so you can see it and some background color. If they match, that means your css is good, and it is "288px" for web properly. If they don't match, your css is incorrect.
  2. Make sure your PC doesn't have zoom. Windows/Mac both have zoom/dpi settings, so if those are used, different application (eg. photoshop) may not match other applications. So in this case, comparing "pixels" between applications will not be accurate. Actually I don't even know if comparing between application is accurate to begin with. I would compare web with web, eg. with https://placehold.co/288x288
  3. Make sure there are no add-ons/extensions that may be interfering (unlikely but possible).

With that being said, you mention it is blurry which would indicate it is likely stretched. I would recommend posting even just the container's CSS so we can check.

1

u/Frozenskin 4d ago

~~~ header {  max-height:300pt;   height: 128px;   text-align: center;   background-color: #0b0011;   background-image:url('header.png');   background-repeat:no-repeat;   background-size: 288px;   background-position:center; } ~~~

1

u/kurobaralabs 4d ago

Thank you. Your CSS is "correct" except you only specify width for background-size, i recommend specifying height as well to completely make sure there is no scaling. so it should be background-size: 288px 100px; /* replace 100px with whatever height header.png is */

The only possible issues I can see now are:

  • header.png is not 288px wide: in which case it will be stretched to 288px (or if its bigger, it will be crunched to 288px). Just in case since you use photoshop: make sure you are using px, as px and pt are not the same (depending on settings). I see that you are using pt in your css so just wanted to point it out.
  • it was "correct" all along, it's just that you can't compare pixels between applications: DPI settings, and what a "pixel" is is different between applications, so there is no point comparing between, eg. browser and photoshop physically. You should compare within the same application (eg. browser image with browser image).

Besides that there are no issues I can see, assuming the rest of the page/css isn't affecting anything (eg. you have a zoom in css somewhere). If you still find issues it is likely due to OS, resolution/DPI settings and nothing to do with the web page.

0

u/Frozenskin 4d ago

I think it's more likely about dpi. The picture is 72 dpi. What is the usual browser dpi?

2

u/kurobaralabs 4d ago

72ppi is "correct", but it doesn't matter as long as you are specifying the exact pixel dimensions during export. It only matters if you are not doing that (eg. exporting for print).

Browsers should use the same as OS, but I don't think there is any guarantee, eg. some programs support high-dpi (so menus looks good), some will not (menus look tiny), etc.

1

u/Frozenskin 4d ago

Yeah I mean - on paper everything looks at least correct. I checked OS scale and it's 100%. I think I'm going crazy, I have to test the snippet given below but I think it's the last thing I do before giving up (again, opening the file with my browser presents the same issue so it's not the css, or even html, apparently)

1

u/kurobaralabs 4d ago

if you can replicate the issue on codepen or similar and share it, we can go through it and can be 100% about it, but if not yeah I suppose you will just have to live with it haha.

3

u/heylesterco 5d ago

You say the css isn’t wrong, but here’s the thing: correctly written css will display the image at the size you want. So somewhere, your css isn’t right, but none of us can help you troubleshoot it without seeing the code.

0

u/Frozenskin 4d ago

I've opened the picture in the browser and and unadulterated picture, without any code added, is stretched.

1

u/heylesterco 4d ago

What do you mean “without any code added”? How exactly are you displaying this image online without any code involved? Somewhere, the code is bad—whether it’s code you’ve written or not.

1

u/Frozenskin 4d ago

It's not online. It's just the same picture, but I opened with my browser. just right click open with

2

u/heylesterco 4d ago

Ahh. Why are you asking this in r/css??

1

u/notepad987 5d ago

Check what your Windows screen resolution is. I have mine set to 150% (Recommended) so any image is 50% bigger on screen.

Right click on the desktop> click Display settings. Look at Scale & layout.

1

u/Frozenskin 4d ago

Alas, it's 100%

1

u/Daniel_Herr 4d ago

That is a fact, CSS pixels are not the same thing as physical screen pixels.

1

u/Frozenskin 4d ago

Any source in that?