Skip to content Skip to sidebar Skip to footer

How To Make A Tumblr Theme (specifically Corner Images) Adjust To Different Screen Resolutions?

I have a pleasant theme on tumblr ( mostlylagomorph.tumblr.com ) for a character 'ask' blog. However, even though the theme looks nice to me, and the images are all in place, other

Solution 1:

CSS:

.container {
    width:100%;
    position:relative;
    height:auto;
}
.container img.one {
    max-width:100%;
    width:90%;
}
.container .two {
    position:absolute;
    top:0%;
    left:20%;
    width:26%
}

HTML:

<div class="container">
    <img class="one" src="http://orig07.deviantart.net/0543/f/2015/144/0/4/tryit_by_wdisneyrp_billcipher-d8unbap.png" />
    <img class="two" src="http://orig08.deviantart.net/dfe9/f/2015/145/8/2/office_by_wdisneyrp_billcipher-d8up8z2.png" />
</div>

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/732/ You can adjust width,top,left values according to your design. This is just to show you the direction to proceed.

Tip: Don't use jpg images in this case. Try a png with transparent background.


Post a Comment for "How To Make A Tumblr Theme (specifically Corner Images) Adjust To Different Screen Resolutions?"