I have some basic experience in HTML/CSS and I started coding my portfolio website but I am already having a problem.
I have a background image let's say 2000px height and I want it to be displayed depending on the resolution the person visiting the website has but I don't want it resized in any way and I don't want a scroll bar. I want to see only 1200px let's say if this is my resolution.
If anyone can help it would be great and much appreciated.
@jkinney768 is right, although I would suggest creating a couple of different versions of the background in different sizes. Otherwise, users on mobile phones will still have to download a 2000x1400px image, which may be several mb in size. I would use media queries to swap out the different background images, like on this Codepen.
Hello my dear coders.
I have some basic experience in HTML/CSS and I started coding my portfolio website but I am already having a problem.
I have a background image let's say 2000px height and I want it to be displayed depending on the resolution the person visiting the website has but I don't want it resized in any way and I don't want a scroll bar. I want to see only 1200px let's say if this is my resolution.
If anyone can help it would be great and much appreciated.
Please let me know if I need to explain better.
Thank you very much.
R.Mircu
It sounds like all you need is something like this:
This will keep the image static and won't resize the background image at all, but if you have a larger screen, it will reveal more of the image.
Hope that's what you're looking for.
@jkinney768 is right, although I would suggest creating a couple of different versions of the background in different sizes. Otherwise, users on mobile phones will still have to download a 2000x1400px image, which may be several mb in size. I would use media queries to swap out the different background images, like on this Codepen.
@david_leitch - You have to be going mobile first in your CSS to prevent desktop assets from downloading.
Sorry, my mistake :) Have fixed it now