Leonid Fedotov

Насчёт CSS - вы думаете в очень правильном направлении, если я правильно понял Вашу цель. Но Вы должны понимать что это основательный костыль. Если бы Вы обрисовали задачу более конкретно, Вам бы здесь предложили бы более узкое решение.
Касательно нагрузки, это будет зависеть от самой картинки. Если не шибко большая, где-то до 4000X4000, то вполне потянет, а дальше уже могут пойти зависания, скорее всего.

Никак :)
А если серьезно, то придётся писать все под Bootstrap. Вот и задайтесь вопросом - подходит ли макет "который не под bootstrap" под те нужны, с которыми Вы хотите использовать Bootstrap. Да и нужно оно ли Вам? Неподходящий макет, например, имеющий другую сетку, создаст Вам много головной боли :)

Можно стандартными HTML с CSS3 (2 волшебных свойства: border и border-radius).
В HTML делаете DIV (рядом с нужными Вам мышкой коробкой):
<div class="Arrow TopLeft"></div>
Затем в CSS делаете несколько правил:

.Arrow{
display:block;
position:absolute;
padding:0;
margin:0;
width:300px; // Вам потребуется самостоятельно подправить ширину/высоту
height:250px;
border-radius:50%;
}
.Arrow.TopLeft{
margin:0 0 0 0; // Самостоятельно делаете позиционирование
border-top-left:1px solid #6e6e6e;
}

И так дублируете необходимые субклассы для каждой .Arrow стрелки. Просто, сердито, очень даже векторно без канвасов и SVG :)

Вам надо пользоваться OG-meta tags и Twitter-meta tags. Возможно в дальнейшем при оптимизации Вам потребуется весь набор:

<meta name="keywords" content="zuru,zuru os,zuruos,zuru cloud os,вход зуру,вход zuru,zuru entrance,zuru login">
<meta name="description" content="Entrance to the Zuru Cloud OS">
<meta name="robots" content="index,nofollow">
<meta name="generator" content="Zuru 1.0"/>
<meta name="author" content="iLeonidze">
<link rel="canonical" href="http://home.zuru.ml/"/>
<link rel="shortlink" href="http://home.zuru.ml"/>
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="True">
<meta http-equiv="cleartype" content="on">
<meta name="format-detection" content="telephone=yes">
<meta name="format-detection" content="address=yes">
<meta name="distribution" content="global">
<link rel="sitemap" type="application/xml" title="Sitemap" href="http://home.zuru.ml/sitemap.xml"/>
<meta name="application-name" content="Zuru Cloud OS">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="apple-touch-icon" href="http://home.zuru.ml/images/specials/apple/touch-icon-60x60.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="http://home.zuru.ml/images/specials/apple/touch-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="http://home.zuru.ml/images/specials/apple/touch-icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="http://home.zuru.ml/images/specials/apple/touch-icon-152x152.png"/>
<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-320x460.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-640x920.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-640x1096.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-768x1004.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-1024x748.png">
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-1536x2008.png">
<link rel="apple-touch-startup-image" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-2048x1496.png">
<meta name="msapplication-tooltip" content="Zuru Cloud OS"/>
<meta name="msapplication-config" content="IEconfig.xml" />
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-square70x70logo" content="./images/specials/windows8/square_70x70_logo.png"/>
<meta name="msapplication-square150x150logo" content="./images/specials/windows8/square_150x150_logo.png"/>
<meta name="msapplication-wide310x150logo" content="./images/specials/windows8/wide_310x150_logo.png"/>
<meta name="msapplication-square310x310logo" content="./images/specials/windows8/square_310x310_logo.png"/>
<meta name="msapplication-starturl" content="http://home.zuru.ml/"/>
<meta name="msapplication-navbutton-color" content="#FFF"/>
<meta name="msapplication-task" content="name=Start Zuru Cloud OS; action-uri=http://home.zuru.ml; icon-uri=http://home.zuru.ml/favicon.ico" />
<meta name="msapplication-task" content="name=Go to official website; action-uri=http://zuru.ml; icon-uri=http://home.zuru.ml/favicon.ico" />
<meta name="msapplication-task" content="name=Read out Twitter; action-uri=https://twitter.com/ZuruTeam; icon-uri=https://abs.twimg.com/favicons/favicon.ico" />
<meta name="msapplication-task" content="name=Subscribe to our VK Page; action-uri=https://twitter.com/ZuruTeam; icon-uri=http://vk.com/images/faviconnew.ico" />
<meta http-equiv="imagetoolbar" content="false"/>
<meta name="dc.language" content="RU">
<meta name="dc.source" content="http://home.zuru.ml/">
<meta name="dc.title" content="Zuru">
<meta name="dc.description" content="Cloud Operating System">
<link rel="yandex-tableau-widget" href="./yandex-tableau-manifest.json" />

Здесь дополнительные Meta-tags под Apple, Microsoft, Yandex Widgets и сервисы, понимающие тип dc.* + самое базовое SEO.

Если исходить удобства в дальнейшем использовании, то конечно белый в топе. Большинство изображений, графики, рекламных блоков, готовых решений, наборов цветовых схем и т.п. заточены под белый фон ибо он самый читабельный. Конечно, Вы можете попробовать брутальный черный, но, поверьте, замучаетесь в дальнейшем :)