What I need is responsive full background image via CSS, say like there.
I've read lots of cases here and saw also one of the "best answers" to the topic Responsive css background images
But I still can't find an appropriate solution to me. Here's my Fiddle
And code:
.container {
background-image: url(http://www.spektyr.com/PrintImages/Cerulean%20Cross%203%20Large.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
height: 700px;
}
Without setting any height as recommended in the answer above the image doesn't appear at all. And when I resize the window to smaller, the image gets some space above instead of fitting the window every time.
What am I doing wrong?
SOLUTION
After hours of experiments it came to solution to use padding-top property instead of setting height