Jump to content
Michal

Div responsive background

Recommended Posts

Hi,

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

https://www.w3schools.com/w3css/tryw3css_templates_gourmet_catering.htm

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;
}

 

 

Share this post


Link to post
Share on other sites

I suggest using responsive design. Using pixels will make it work on a specific screen but not on all.

 

Try using:
width: 100%;
height: 100vh;

vh means View Height. 100 is actually 100% of the height of one's screen.

Share this post


Link to post
Share on other sites

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

×