CODEWITHSUNDEEP
htmlimagecssbackground
j.doe
j.doe

Reputation: 47

Making the background image full width

I would like to have background image to whole width. I have CSS code as below.

background: url(../images/img.png) 50% 50% no-repeat; -webkit-background-size: auto 100%; background-size: auto 100%;

But with this code image has margin with two sides. I made margin:0 in body tag of course. Thanks for help!

Upvotes: 0

Views: 2452

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

You are starting the background with 50% 50% which is kinda weird. So what you do is to use background-size: cover; and make sure you give no-repeat:

body {background: url("https://images.unsplash.com/photo-1489844097929-c8d5b91c456e?dpr=1&auto=format&fit=crop&w=1500&h=998&q=80&cs=tinysrgb&crop=") no-repeat; background-size: cover;}

Upvotes: 0

B2725
B2725

Reputation: 352

You can use following css.

 body, html {
        height: 100%;
    }

    .bg { 
        /* The image used */
        background-image: url(../images/img.png);

        /* Full height */
        height: 100%; 

        /* Center and scale the image nicely */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

Upvotes: 2

Related Questions