Uly.me

cloud engineer

background

Vim Colors

I had trouble getting my vi editor to display all black background color. This includes the background color after the end of the file. I just wanted an all black background for better visibility. I did a little bit of googling and found this nice little gem. I happen to like the dessert theme and went with that instead of the recommended mustang theme which I don’t have installed. Hope you’ll find this helpful.

set t_Co=256
set background=dark
colorscheme dessert
highlight Normal ctermbg=NONE
highlight nonText ctermbg=NONE

OBS Chroma Key

Here’s how to add chroma key (green screen) to your OBS shoot.

  • Start OBS.
  • Add a video source.
  • Right click on video source and select ‘Filter’.
  • Click + in the ‘Effects Filters’ section, and choose ‘Chroma Key’.
  • Enter a name for the effects layer.
  • Fine tune the settings.
  • Add background layers.
  • Make sure to send to the back.

Charging At Night

charging

Charging the laptop at night. I’m trying to get back into photography. This photo shows how a responsive design render images differently in various screen sizes using CSS max-width at 100%. In addition, the height is set to auto to keep the scale correct.

img {
 height: auto; /* Make sure images are scaled correctly. */
 max-width: 100%; /* Adhere to container width. */
}

Now regarding the Mac, there’s a rumor that Apple is planning to release a 12-inch MacBook Air as detailed here by Forbes.

Background Cover

Adding background images to your designs is quite simple. All you need to do is assign CSS background-image to the body of your design. In addition, you can also assign a background color, just in case the background image is not rendered.

body {
    background-image: url("path/to/the/background/image.gif");
    background-color: #cccccc;
}

The code above may have worked in the past, but with 4k and 5k monitors becoming popular nowadays, you need to make sure your background images are big enough to cover the large monitors as well.

To make your background image cover all monitor sizes, you need to use “background-cover.”

body { 
    background-size: cover;
}

Here’s the entire code.

body {
    background-image: url("path/to/the/background/image.gif");
    background-color: #cccccc;
    background-size: cover;
}

HTML5 Fullscreen Background Videos

I noticed several websites using a fullscreen background videos on their home pages. A good example is Paypal.com. The videos are typically short, between 10-15 seconds, with the sound turned off. The video falls back to a still background image for visitors whose browsers do not support HTML5 videos.

In addition, Paypal is using what looks like a playlist of several short videos that are displayed in a loop. If you’re interested in how you can implement background videos on your web pages, demothenes.info has a tutorial on how to add video background videos on your website.