Jump to content

Div responsive background


Recommended Posts


I want to prepare something like one of the w3 templates. This one:


But I can't find a solution for the responsive div-background image.

I know I can use the background-size: cover and the image scales nicely, but the case is that I have to insert it in the div element, what means I have to enter:

  • width: I tried 100% but the center doesn't work then, so I put 1600px, and everything looks fine however probably this isn't the best way
  • height: If I use px, eg. 800 the picture scales nicely, but there is empty space below the image, if the screen goes below 800px height, if I use percent, the image doesn't show

In the template the image, together with the div scales nicely, and there is no empty space...

.main-image {
    position: relative;
    width: 1600px;
    background-image: url("main.jpg");
    background-size: contain;
    height: 800px;
    background-repeat: no-repeat;
    margin: auto;



Link to comment
Share on other sites

  • 3 weeks later...
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...