[英]how to make background image to be one full page without cropping the image
I am trying to make the webpage, and I have trouble setting the background image of the webpage.我正在尝试制作网页,但无法设置网页的背景图像。 I want my background image to be one full page without cropping or zooming the image or requiring scrolling.我希望我的背景图像是一整页,而不需要裁剪或缩放图像或需要滚动。 I have my background image with the size of 1920x1080.我的背景图片大小为 1920x1080。 I thought this size should make the webpage to be one full page, but it did not.我认为这个大小应该使网页成为一个完整的页面,但事实并非如此。 What should I do for the image to fit on one page?我应该怎么做才能使图像适合一页?
background-image: url('image/background1-1.png');
width: 100%;
height: 100vh;
This code is what I have done for the background image, but it crops the image.这段代码是我为背景图像所做的,但它裁剪了图像。
Also, I am following the size or location of the images from the design that I did in XD.此外,我遵循我在 XD 中所做的设计中图像的大小或位置。 However, it does not match if I apply it as a code.但是,如果我将其作为代码应用,则不匹配。 For example, according to XD, the location of the text is top: 328px;比如按照XD,文字的位置是top:328px; left: 786px, but if I apply this information to my code, the text does not appear where the text is supposed to appear.左:786px,但如果我将此信息应用于我的代码,文本不会出现在文本应该出现的地方。
I am struggling with these questions.我正在努力解决这些问题。 I would appreciate your help as I do not have much knowledge regarding this topic.感谢您的帮助,因为我对这个主题了解不多。
You're looking for the background-size
property.您正在寻找background-size
属性。 If you truly don't want to crop the image at all, use contain
, but this will likely not feel like a true background image.如果您真的根本不想裁剪图像,请使用contain
,但这可能不像真正的背景图像。 cover
will enlarge the image just enough to fit within the bounds of the browser window's dimensions, and will crop it slightly when the browser's w/h ratio isn't identical to your images w/h ratio. cover
会将图像放大到刚好适合浏览器窗口尺寸的范围,并在浏览器的 w/h 比率与您的图像 w/h 比率不同时稍微裁剪它。
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
background-image: url('image/background1-1.png');
background-color: #000;
background-position:center center;
background-repeat; no-repeat;
background-size: cover; /* contain */
width: 100%;
height: 100vh;
you can add this你可以添加这个
background-image: "url(/meals/3.jpg)",
background-position: "center",
background-repeat: "no-repeat",
background-size: "cover",
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.