Filip Bartuzi Filip Bartuzi - 6 months ago 7
HTML Question

Background image scaling to actual width but save propotions

Im totaly newbie in html css and I discover it so annoying to write what I want to achieve... Not so easy language.
Generally I want to achieve effect like the first image with palms there - https://spacebox.io/

but the thing is achieve is that my www.rar file

I have no idea how to fix it.. its scales wrong and I can't achieve result like on spacebox.io

#topka{
display: block;
position: relative;
top: 56px;
margin: auto;
height:350px;
max-width: 100%;
min-width: 100%;
background-image: url("img/topka.png");
background-position: center;
background-size:100% 1200px;
background-repeat: no-repeat;
width:100%;

Answer

the way i usually do this is wrap all my content within a div and style that div to fit the screen and place all content within it, for example:

HTML

<div id="background-cover">

    <!-- All page layout/divs/content here -->

</div>

And then target that element in css with this code, where background.jpg is your filename. You can use center center for perfect centered image:

#background-cover {
    width: 100%;
    height: 100%;
    background: url('background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.background.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background.jpg', sizingMethod='scale')";
}