0
4

[–] Fred-Stiller-OnAWire 0 points 4 points (+4|-0) ago  (edited ago)

This is the code I'm using on /v/cyberpunk for a 280 x 280px square image (Remove the dot before the at symbol)

/* Sidebar image
-------------------------------------------------------------------------------- */
.side .md:nth-of-type(1)
{
background: url(https://i.imgur.com/fs381ff.png) top center no-repeat;
padding: 280px 0 0;
margin: 10px 0 0;
}

/* Retina display support
-------------------------------------------------------------------------------- */
.@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

.side .md:nth-of-type(1)
{
background: url(https://i.imgur.com/bFTYR5t.png) top center no-repeat;
background-size: 280px 280px;
padding: 280px 0 0;
margin: 10px 0 0;
}

}

This is the code I'm using on /v/bowie for a 280 x 374px rectangle image (Remove the dot before the at symbol)

/* Sidebar image
-------------------------------------------------------------------------------- */
.side .md:nth-of-type(1)
{
background: url(https://i.imgur.com/QCeGdit.png) top center no-repeat;
padding: 374px 0 0;
margin: 10px 0 0;
}

/* Retina display support
-------------------------------------------------------------------------------- */
.@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

.side .md:nth-of-type(1)
{
background: url(https://i.imgur.com/WNODp0T.jpg) top center no-repeat;
background-size: 280px 374px;
padding: 374px 0 0;
margin: 10px 0 0;
}

}

0
1

[–] Zenocide 0 points 1 points (+1|-0) ago 

This code worked for me where other examples have not, /v/horror thanks you! :)

0
1

[–] grantishere [S] 0 points 1 points (+1|-0) ago 

One more question. I added the image to the sidebar successfully but there is a huge space separating the image and the sidebar message. You can view it at /v/themes

0
2

[–] Fred-Stiller-OnAWire 0 points 2 points (+2|-0) ago 

As a quick fix change 374px on the padding to 183px, this is the image height. So this would be the code...

/* Sidebar image
-------------------------------------------------------------------------------- */
.side .md:nth-of-type(1)
{
background: url(https://i.imgur.com/4koXPK7.png) top center no-repeat;
padding: 183px 0 0;
margin: 10px 0 0;
}

You can remove the Retina display support part if you don't have a 2x image. If you do you also need to change the padding for that and make sure the background-size is correct.

Ideally you want the image to have a width of 280 pixels and then change that padding value to the height of the image.

Also use https instead of http on the image url, so https://i.imgur.com/4koXPK7.png instead of http://i.imgur.com/4koXPK7.png

0
1

[–] grantishere [S] 0 points 1 points (+1|-0) ago  (edited ago)

Thanks but when I tried doing this it just showed up as raw CSS

Edit: I realize now that I was putting it into the sidebar settings haha! Thank you very much!