Filip Bartuzi Filip Bartuzi - 1 year ago 46
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 -

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

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

Answer Source

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:


<div id="background-cover">

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


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')";