Background Image Hacks in CSS | Tiffany R. White Blog

Background Image Hacks in CSS

Reading time: 10 mins

Yesterday 1 I found myself in a situation where the background image in my freeCodeCamp Weather App on mobile was cut off at the bottom. Needed some background image hacks in css to fix it.

For context

My code for switching up the background depending on your weather conditions is as follows:

  if (currentIcon === "clear-day")   {
	$("body").css("background-image", "url(https://i.imgur.com/voece1h.jpg)");
  }   else if (currentIcon === "partly-cloudy-night")   {
	$("body").css("background-image", "url(https://i.imgur.com/r8haFIj.jpg)");
  }   else if (currentIcon === "clear-night")   {
	$("body").css("background-image", "url(https://i.imgur.com/K6Bazrl.jpg)");
  }   else if (currentIcon === "partly-cloudy-day").  {
	$("body").css("background-image", "url(https://i.imgur.com/dUS9u9b.jpg)");
  }   else if (currentIcon === "cloudy")   {
	$("body").css("background-image", "url(https://i.imgur.com/Kx3ku27.jpg)");
  }   else if (currentIcon === "rain")   {
	$("body").css("background-image", "url(https://i.imgur.com/g4afvja.jpg)");
  }   else if (currentIcon === sleet)   {
	$("body").css("background-image", "url(https://i.imgur.com/pjq3VPO.jpg)");
  }   else if (currentIcon === snow)   {
	$("body").css("background-image", "url(https://i.imgur.com/vH9cyKD.jpg)");
  }   else if (currentIcon === wind)   {
	$("body").css("background-image", "url(https://i.imgur.com/ZtSl66b.jpg)");
  }   else if (currentIcon === fog)   {
	$("body").css("background-image", "url(https://i.imgur.com/5z0CXkZ.jpg)");
}


This bug had been bothering me for a week or so. I searched on Stack Overflow for an appropriate solution and found that I could use a div wrapper and add:

body {
   background-size: cover;
   background-repeat: no-repeat;
}

I added the wrapper but nothing happened.

I also already had my main content wrapped in a div:

  <body>
    <div class="wrapper">
      <div class="col-md-12">
        <header>
          <h1 class="h1-title:">Local Weather App </h1>
          <h3></h3>
        </header>

Object-fit, etc

You can usually object-fit on an image with the properties: fill, cover, contain, scale-down, or none:

[caption id=”attachment_2183” align=”aligncenter” width=”337”]fill fill[/caption]

[caption id=”attachment_2181” align=”aligncenter” width=”395”]cover cover[/caption]

[caption id=”attachment_2186” align=”aligncenter” width=”398”]contain contain[/caption]

[caption id=”attachment_2187” align=”aligncenter” width=”515”]scale-down scale-down[/caption]

[caption id=”attachment_2184” align=”aligncenter” width=”590”]none none[/caption]

I tried object-fit: cover on the body. Didn’t work. Same with contain, scale-down, and fill.

I searched some more and found the answer on a Treehouse forum.

html {
   min-height: 100%;
}

I tried height: 100% on the body but that didn’t work either.

Since the html element is actually at the root of the document and body descends from the html element, applying the global style to the html element actually makes sense.

Also, because I am specifying a minimum height that happens to be a percentage, it makes it responsive because I am not specifying a fixed size in the viewport.

Now, I have a mobile app that looks like this:

Still, I need to fix the loading issue. Thats for another day.

You can find the weather app at https://twhite96.github.io/Weather_App.

</div>

Yesterday 1 I found myself in a situation where the background image in my freeCodeCamp Weather App on mobile was cut off at the bottom. Needed some background image hacks in css to fix it.

For context

My code for switching up the background depending on your weather conditions is as follows:

  if (currentIcon === &quot;clear-day&quot;)   {
	$(&quot;body&quot;).css(&quot;background-image&quot;, &quot;url(https://i.imgur.com/voece1h.jpg)&quot;);
  }   else if (currentIcon === &quot;partly-cloudy-night&quot;)   {
	$(&quot;body&quot;).css(&quot;background-image&quot;, &quot;url(https://i.imgur.com/r8haFIj.jpg)&quot;);
  }   else if (currentIcon === &quot;clear-night&quot;)   {
	$(&quot;body&quot;).css(&quot;background-image&quot;, &quot;url(https://i.imgur.com/K6Bazrl.jpg)&quot;);
  }   else if (currentIcon === &quot;partly-cloudy-day&quot;).  {
	$(&quot;body&quot;).css(&quot;background-image&quot;, &quot;url(https://i.imgur.com/dUS9u9b.jpg)&quot;);
  }   else if (currentIcon === &quot;cloudy&quot;)   {
	$(&quot;body&quot;).css(&quot;background-image&quot;, &quot;url(https://i.imgur.com/Kx3ku27.jpg)&quot;);
  }   else if (currentIcon === &quot;rain&quot;)   {
	$(&quot;body&quot;).css(&quot;background-image&quot;, &quot;url(https://i.imgur.com/g4afvja.jpg)&quot;);
  }   else if (currentIcon === sleet)   {
	$(&quot;body&quot;).css(&quot;background-image&quot;, &quot;url(https://i.imgur.com/pjq3VPO.jpg)&quot;);
  }   else if (currentIcon === snow)   {
	$(&quot;body&quot;).css(&quot;background-image&quot;, &quot;url(https://i.imgur.com/vH9cyKD.jpg)&quot;);
  }   else if (currentIcon === wind)   {
	$(&quot;body&quot;).css(&quot;background-image&quot;, &quot;url(https://i.imgur.com/ZtSl66b.jpg)&quot;);
  }   else if (currentIcon === fog)   {
	$(&quot;body&quot;).css(&quot;background-image&quot;, &quot;url(https://i.imgur.com/5z0CXkZ.jpg)&quot;);
}


This bug had been bothering me for a week or so. I searched on Stack Overflow for an appropriate solution and found that I could use a div wrapper and add:

body {
   background-size: cover;
   background-repeat: no-repeat;
}

I added the wrapper but nothing happened.

I also already had my main content wrapped in a div:

  &lt;body&gt;
    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;col-md-12&quot;&gt;
        &lt;header&gt;
          &lt;h1 class=&quot;h1-title:&quot;&gt;Local Weather App &lt;/h1&gt;
          &lt;h3&gt;&lt;/h3&gt;
        &lt;/header&gt;

Object-fit, etc

You can usually object-fit on an image with the properties: fill, cover, contain, scale-down, or none:

[caption id=”attachment_2183” align=”aligncenter” width=”337”]fill fill[/caption]

[caption id=”attachment_2181” align=”aligncenter” width=”395”]cover cover[/caption]

[caption id=”attachment_2186” align=”aligncenter” width=”398”]contain contain[/caption]

[caption id=”attachment_2187” align=”aligncenter” width=”515”]scale-down scale-down[/caption]

[caption id=”attachment_2184” align=”aligncenter” width=”590”]none none[/caption]

I tried object-fit: cover on the body. Didn’t work. Same with contain, scale-down, and fill.

I searched some more and found the answer on a Treehouse forum.

html {
   min-height: 100%;
}

I tried height: 100% on the body but that didn’t work either.

Since the html element is actually at the root of the document and body descends from the html element, applying the global style to the html element actually makes sense.

Also, because I am specifying a minimum height that happens to be a percentage, it makes it responsive because I am not specifying a fixed size in the viewport.

Now, I have a mobile app that looks like this:

Still, I need to fix the loading issue. Thats for another day.

You can find the weather app at https://twhite96.github.io/Weather_App.

</div>

</div>

  1. And for several days before that actually.  2


Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.


Coffee Buy me a coffeeBuy me a coffee


Webmentions 0

No webmentions were found.

Newsletter