Home  >  Article  >  Web Front-end  >  The problem with the background being centered at the top. _html/css_WEB-ITnose

The problem with the background being centered at the top. _html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:02:381390browse

Define a div with a height of 110 and a width that adapts to the screen. Give it a background image with a height of 220 and a width of 1320. How can the top of the background image be centered in the div?


Reply to the discussion (solution)

Sit back and wait for the master.

I don’t understand it, but please change the following three attributes, it should satisfy you!
background-size: 100% 100%;
background-position-x: center;
background-position-y: center;

What does the first one mean? Are the second and third x and y relative to this div?

What does the first one mean? Are the second and third x and y relative to this div?



1. The first one is the size of the background, and the percentage is relative to the div.
2. Yes

The width of my div is set to adapt to the screen, and the height is 110. If the background uses background-size: 100% 100%;, then the width is also adaptive? Will the width be stretched?

The width of my div is set to adapt to the screen, and the height is 110. If the background uses background-size: 100% 100%;, then the width is also adaptive? Will the width be stretched?


background-size: auto 100%;

Yeah. Thank you

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn