CODEWITHSUNDEEP
cssbackground-image
user5900092
user5900092

Reputation:

Background image size is not displaying on firefox

Background image does not display correctly on firefox, but it works fine on other browsers. Please see the link here

body {
  background-image: url('http://mycommunitylink.us/wp-content/uploads/2016/06/HCC_LandPage_1920x10803.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

Upvotes: 1

Views: 349

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106078

background-size works properly,

but you content is in position:absolute; so it gives no height to body, so no background to see in fact.

Where every other browser use html to draw the background and also move the background-size, firefox keeps background-size attached to the actual size of body, it is morelike a bug in my opinion.

https://www.w3.org/TR/CSS2/colors.html (about backgrounds and colors ... )

You can add:

html {
    height:100%;
}
body {
    min-height:100%;
}

or use html instead for the background.

Upvotes: 2

ghost_dad
ghost_dad

Reputation: 1306

Instead of background-size: 100% 100%; you should use cover. This ensures that the image will cover the full page no matter the size (matches height or width depending which is greater). Like so:

body {
  background-image: url('http://mycommunitylink.us/wp-content/uploads/2016/06/HCC_LandPage_1920x10803.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

An ever better way to write out the same thing would be:

body {
  background: url('http://mycommunitylink.us/wp-content/uploads/2016/06/HCC_LandPage_1920x10803.jpg') center center / cover no-repeat;
}

Edit: The real answer is a combination of @GCyrillus answer, and this one. Add height: 100% or height: 100vh to the body in order to have a full-height image. Then update background-size: cover to stretch the image properly while maintaining ratio.

Upvotes: 1

ciurciurek
ciurciurek

Reputation: 112

This property works:

background-size: 100%;

Upvotes: 1

Related Questions