![]() The same effect can be achieved by using padding and background-origin:Īlso, you can use the calc() function to calculate the distance from the element’s edges.īackground-position: top calc(100% - 20px) left calc(100% - 10px), You can create a flexible background that always stays in the center of the page, on all devices, no matter how wide or narrow the viewport is. To center the background image, use background-position: center. To make sure the image is fully visible, use background-size: contain. Set the height of the container at 100vh - it means that the height will be equal to that of the viewport. svg format are best fit for this purpose. This way, your background image is constantly centered in full height and width of the browser window. To add some responsive text to your responsive background, apply position: relative to the container and position: absolute to the text. The margin-left: auto margin-right: auto and text-align: center will help center the text. You can also add media queries to make the text smaller on mobile devices. This way, your text will always be in the center of your responsive background.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |