Background Image Not Showing

I would like my background image to be a map. the image is twice as tall as it is wide. So a user has to scroll the page to see the whole map. That is fine.

Here is standard CSS code for displaying a background image:

#showcase {
  background: url('/imgMaster/map.jpg') no-repeat center center/cover;
  width: 100%;
  height: auto;
  max-width: 1500px;
}

With the above no image shows.

If I change the height property in the code as follows, then the image shows:

#showcase {
  background: url('/imgMaster/map.jpg') no-repeat center center/cover;
  width: 100%;
  height: 250vh;
  max-width: 1500px;
}

Can anyone explain this behaviour please? Thanks.

If the #showcase has no content then it’s height will be zero and nothing will show. Once you add height or content then the background will have somewhere to display.

If indeed the element is to remain empty then why not insert a foreground img instead and set its width to 100% and its height to auto.

If the image is only for decoration then use an aspect ratio method to create the relationship between height and width. In that way the image can remain as a background image.

1 Like

The #showcase does have content. It has a site title. It also has a button near the bottom of the viewport. Here is a screenshot with height set to auto:

and here is a screenshot with height set to 250vh:

Thanks.

Is that content by any chance positioned absolute or otherwise removed from flow?

I think I’ve figured it out. The background image didn’t like being in the #showcase element. I moved it to “body” and the map now displays with height set to “auto”.

I notice.one other issue: On some smaller devices, the image is a bit cropped on the sides. Is this normal? Thanks.

I explained why the background didn’t show. :slight_smile: It’s because an empty element has no height and therefore there will be no background on which to place your picture. (why the element is empty when you say its not is probably because you absolutely removed some content from the element as absolute elements are removed from the flow).

The body element covers the viewport so placing an image as a background to the body will initially cover the viewport (strictly speaking though the image is actually propagated to the html element as the body doesn’t really have a height until content makes it so but for historic reasons an image attached to the body will fill the viewport as long as the html element has no image applied).

However once content extends past the bottom of the viewport the background will continue below the fold and cover as far as the content goes.

If you do not have any content on the page apart from a heading and a button then this should not be an issue but there would be better ways to do this more reliably if all you want is a viewport sized image e.g…

An image can’t fit a viewport without being cropped in some way. When you use the property cover then the width and height of the image are increased proportionately until both fill the required area. This will result in the image appearing cropped in one direction or another unless the image is the exact shape of the currently viewed viewport (which would be never in most cases). :wink:

TLDR: Choose your images carefully :slight_smile:

If you can attach the image you want to use then we might be able to show an example :slight_smile:

Also be aware that ‘Welcome Screens’ are on the top ten list of web designer mistakes and put an extra click between your content and your audience. Think carefully whether they benefit you in any way if indeed that was what you were trying to do.

3 Likes

When you said that the element was considered empty, you were right. Although there is a title and button in the element, both are fixed positioned. So the map wouldn’t show. I hadn’t thought of the flow issue.

My goal is to have the map be the background image. As best as possible it should cover the viewports of all sizes of devices. It should also be scrollable by the user. However, the site title and button should not scroll, thus they are fixed.

I have mostly accomplished this with this setting for the map:

body {
background: url(‘/ImgMaster/map.jpg’) no-repeat center center/cover;
width:100vw;
height: 250vh;
max-width: 1500px;
}

The height requires adjustment for different devices. Perhaps there is a better way. Earlier you mentioned using an aspect ratio technique for the background. I’ve never done that. Do you think that is the best way to go to accomplish my goals?

Here is the map image:

I understand your comment regarding having a landing page but, in this case, it is appropriate.

Thank you.

UPDATE: I tried the aspect ratio method and it seems to have worked pretty well for the map. Here is the code I used:

body {
background: url(‘/ImgMaster/map.jpg’) no-repeat center center/cover;
width:100vw;
height: 0;
max-width: 1500px;
padding-top: 135%;
}

The whole map appears on all devices. However, on small screens in portrait mode, the map doesn’t fill the whole screen vertically. I guess that is understandable. Maybe a method other than aspect ratio needs to be used for those screens. If the map is enlarged to fill the height then the sides will have to be cropped some.

Coding is fascinating but takes a lot of learning. I’m retired so I have time.

Hi there Engine44,

does this help…

Page View

https://codepen.io/coothead/full/XWboEdw

CSS Code

https://codepen.io/coothead/pen/XWboEdw

coothead

2 Likes

Yes practice is the key and there is so much to learn with CSS these days :slight_smile:

I forked the example from @coothead (thanks) and placed your text in a responsive way.

Yes most phones have a width that is not even half of their height so you cannot make a square fit an oblong without cropping it in some way. I would suggest that in the media query for smaller devices you increase the padding-top and then use background-size:cover. It will of course crop the sides a little as the image zooms out in order to fit the height but should still be pretty much ok.

Alternatively make it a feature and colour the bottom of the screen using a suitable background colour on the body (In my example above I used a yellowish background but there’s no reason you couldn’t use something more striking.

Remember all browsers don’t have to look the same.

2 Likes

Thank you. I successfully tried a version of that method.

I’ve studied your design approach which is obviously better than mine. The use of flex-column is great. I’ve incorporated most of your methods. Thank you.

2 Likes

Good morning, In your code example, the second line of the title text wraps as the viewport narrows. Which part of the code causes that? Thanks

Depending on the font-size the text wraps by itself when the line becomes too short.

You could try avoid the wrap by adjusting the font-size in a narrower media rule.

1 Like

In my opinion the wrapping text looks better on the smaller devices but as Erik said you can reduce the minimum font-size in the media query.

e.g.

@media (max-width: 666.6666666667px) {
  .heading {
    font-size: 1.5rem;
  }
}

No, I like it. Just wanted to know what causes it. Thanks.

1 Like

No, I like it. Just wanted to know what causes it. Thanks.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.