All geek questions in one place

Set image as footer background in CSS

So, I want to add a footer to my page, but I want it to be a background image that automatically changes depending on the resolution of the monitor and has its width and height of 100%, but never overflows the sides, so I don't want scroll bars to appear . Image .jpg.

Would appreciate some input as to what is the best way around this.

+6
source share
2 answers

Use the following CSS

​div { width: 100%; height: 400px; background-image: url(your-path-here.jpg); background-size: 100% 100%; }​

And see this live example

+8
source

Be careful if you do not change the height of the footer, this will stretch the image.

background-size will do the trick, but note that it is not supported by IE8 or later. To be safe for these browsers, the image may be centered (meaning 50% horizontally and 50% vertically - of course, the center keyword also works)

Live demo: http://dabblet.com/gist/2790711

+1
source

Source: https://habr.com/ru/post/916705/

More articles:


All Articles