The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Problem stretching image
webnoob1
post Mar 15 2016, 11:57 AM
Post #1





Group: Members
Posts: 1
Joined: 15-March 16
Member No.: 24,075
I'm trying to revamp my personal blog and I'm having trouble trying to get the images posted to resize automatically to fit the browser, to make it full screen in a sense. I'm terrible with HTML but I do have a real real basic knowledge of how it works.

Originally the image defaulted on the screen http://www.imeugene.com was repeated but somehow I got it to not do that but I don't know what part of the coding deals with the posted image. I tried reseting a few sizing to be 100% but to no work. Anyone got any ideas which part I have to mess up in the coding?


<!DOCTYPE html>
<html lang="{block:English}en{/block:English}{block:French}fr{/block:French}{block:German}de{/block:German}{block:Japanese}ja{/block:Japanese}{block:Italian}it{/block:Italian}{block:Spanish}es{/block:Spanish}{block:Polish}pl{/block:Polish}">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">

<!--

-->

<meta name='text:Disqus Shortname' content='' />
<meta name="text:Google Analytics ID" content="">

<!-- DEFAULT COLORS -->
<meta name="color:Title" content="#FFFFFF"/>
<meta name="color:Title Hover" content="#000000"/>
<meta name="color:Text Post" content="#2c333f"/>
<meta name="color:Quote Post" content="#ff6b46"/>
<meta name="color:Chat Post" content="#0ba5e6"/>
<meta name="color:Link Post" content="#1de7a2"/>
<meta name="color:Audio Post" content="#9575B2"/>

<!-- OPTIONS -->
<meta name="if:Infinite scrolling" content="0">
<meta name="if:Show description" content="1"/>
<meta name="if:Show captions on index" content="1"/>

<meta name="select:Photos" content="tile" title="Tile">
<meta name="select:Photos" content="fill" title="Fill screen">
<meta name="select:Photos" content="center" title="Center">

<title>{Title}{block:PostSummary} &mdash; {PostSummary}{/block:PostSummary}</title>
<meta name="description" content="{MetaDescription}">

<link rel="apple-touch-icon" href="{PortraitURL-128}">
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<link rel="stylesheet" href="http://static.tumblr.com/exomipi/lKfmmovhi/normalize.min.css">

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


<style>


body, html {
width: 100%;
height: 100%;
font-family: "Helvetica Neue","HelveticaNeue",Helvetica,Arial;
background: black;
}

.posts {
width: 100%;
height: 100%;
position: relative;
}

.clear {
display: block;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
clear: both;
float: none;
}

.container {
width: auto;
height: auto;
}

.post {
width: 100%;
height: auto;
margin: 0 auto;
position: relative;
background-color: {Color:Text Post};
}

.post-text {
background-color: {Color:Text Post};
}

.post.post-text {
height: auto;
min-height: 100%;
}

.post-quote {
background-color: {Color:Quote Post};
}

.post-link {
background-color: {Color:Link Post};
}

.post-chat {
background-color: {Color:Chat Post};
}

.post-audio,
.post-video {
background-color: {Color:Audio Post};
}

.post-photo,
.post-photoset {
background: #111 center center no-repeat fixed;
background-size: 32px;
}


.post-text + .post-text,
.post-quote + .post-quote,
.post-link + .post-link,
.post-chat + .post-chat,
.post-audio + .post-audio,
.post-video + .post-video {
border-top: 1px solid rgba(0,0,0,0.1);
}

.post-bg {
width: 100%;
height: auto;
min-height: 100vh;
background-position: center center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
display: box;
display: flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

.photo > a,
.photoset > a,
.panorama > a {
display: block;
width: 100vw;
height: 100vh;
}

.post.post-photoset {
height: auto;
}


.title {
text-align: center;
height: auto;
padding: 30px 0;
font-weight: bold;
position: absolute;
width: 100%;
z-index: 100;
}

.title h1 {
color: {color:Title};
margin: 0;
font-size: 32px;
word-wrap: break-word;
}

.title a:hover {
color: {color:Title Hover};
}

.title.index-title h1 {
font-size: 56px;
}

.title h2 {
margin: 0 auto;
margin-top: 10px;
font-size: 20px;
font-weight: normal;
color: white;
}

.title.index-title h2 {
font-size: 24px;
}

.title a {
color: {color:Title};
text-decoration: none;
}

a {
color: #FFF;
text-decoration: underline;
}

#disqus_block a {
color: #0BA5E6;
}

.arrow-up {
margin: 0 auto;
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #000;
position: absolute;
left: 50%;
margin-left: -11px;
bottom: -1px;
}

.meta {
background: #000;
background: rgba(0,0,0,0.3);
color: white;
text-align: center;
font-size: 14px;
font-weight: bold;
position: absolute;
bottom: 10px;
left: 10px;
}

.meta:hover {
background: rgba(0,0,0,0.8);
}

.meta a {
text-decoration: none;
}

.meta ul {
margin: 0;
padding: 0;
}

.meta li {
display: block;
text-align: left;
padding: .5em 1em;
line-height: 2em;
}

.meta li.more-link {
padding: 0;
line-height: auto;
}

.meta li.more-link a {
display: block;
padding: 0;
font-size: 20px;
line-height: 29px;
width: 35px;
height: 35px;
text-align: center;
}

.caption {
font-size: 14px;
line-height: 1.5em;
font-weight: bold;
color: #FFF;
position: absolute;
bottom: 10px;
width: 100%;
display: inline-block;
text-align: center;
}

.caption p, .caption blockquote {
margin: 0;
}

.caption > span {
display: inline-block;
padding: .5em 1em;
background: rgba(0,0,0,0.5);
margin: 0 20%;
}

{block:IfNotShowCaptionsOnIndex}
.index-page .caption {
display: none;
}
{/block:IfNotShowCaptionsOnIndex}

nav {
background: #111;
color: #FFF;
font-size: 72px;
position: relative;
width: 100%;
}

.infinite-scrolling.index-page nav.pages-nav {
display: block;
}

nav a {
color: #ddd;
text-decoration: none;
text-align: center;
line-height: 1em;
padding: 0px 0 0.2em;
}


nav a:hover {
color: #fff;
background-color: #000;
}

.back, .forward {
float: left;
width: 50%;
}

.forward {
float: right;
}

/* ==========================================================================
Menu
========================================================================== */

.MenuStuff,
.MenuStuff ul {
display: none;
}

.Ask,
.Submit,
.Pages {
display: block !important;
}

#menu {
position: fixed;
z-index: 105;
top: 0;
left: 0;
-webkit-transform: translate(-100%, 0);
-webkit-transition: -webkit-transform 200ms ease-in-out;
-moz-transform: translate(-100%, 0);
-moz-transition: -moz-transform 200ms ease-in-out;
-o-transform: translate(-100%, 0);
-o-transition: -o-transform 200ms ease-in-out;
-ms-transform: translate(-100%, 0);
-ms-transition: -ms-transform 200ms ease-in-out;
transform: translate(-100%, 0);
transition: transform 200ms ease-in-out;
width: 300px;
height: 100%;
background: black;
color: white;
overflow: auto;
}

#menu ul + ul {
border-top: 1px solid rgba(255,255,255,0.2);
}

#menu h3 {
text-align: center;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 25px;
}

#menu ul {
text-align: center;
font-size: 14px;
line-height: 18px;
margin: 10px 20px;
padding: 0;
list-style: none;
}

#menu li {
margin: 15px 0;
}

#menu li a {
text-decoration: none;
border-bottom: 1px solid transparent;
-webkit-transition: border 200ms;
-moz-transition: border 200ms;
-o-transition: border 200ms;
transition: border 200ms;
}

#menu li a:hover {
text-decoration: none;
border-bottom: 1px solid white;
}

label[for=ShowMenu] {
border: 0;
background: rgba(0,0,0,0.3);
position: fixed;
z-index: 110;
top: 10px;
left: 10px;
text-align: center;
padding: 0;
margin: 0;
width: 35px;
height: 35px;
cursor: pointer;
}

label[for=ShowMenu]:hover {
background: black;
}

label[for=ShowMenu] span {
display: inline-block;
width: 16px;
height: 2px;
background: white;
position: relative;
top: 3px;
}

label[for=ShowMenu] span:before,
label[for=ShowMenu] span:after {
content: '';
position: absolute;
width: 16px;
height: 2px;
background: white;
-webkit-transition: opacity 200ms;
-moz-transition: opacity 200ms;
-o-transition: opacity 200ms;
-ms-transition: opacity 200ms;
transition: opacity 200ms;
}

label[for=ShowMenu] span:before {
top: -5px;
left: 0;
}

label[for=ShowMenu] span:after {
top: 5px;
left: 0;
}

#ShowMenu {
position: fixed;
left: -1000%;
top: 0;
}

#ShowMenu:checked ~ #menu {
-webkit-transform: translate(0%, 0);
-moz-transform: translate(0%, 0);
-o-transform: translate(0%, 0);
-ms-transform: translate(0%, 0);
transform: translate(0%, 0);
}

#ShowMenu:checked ~ label[for=ShowMenu] span:before,
#ShowMenu:checked ~ label[for=ShowMenu] span:after {
opacity: 0;
}

/* ==========================================================================
Text / Chat Posts
========================================================================== */

.text {
height: 100%;
}

.text-block {
font-size: 16px;
line-height: 1.5em;
width: 50%;
padding: 50px 0;
margin: auto;
min-width: 300px;
color: white;
}

.text-block a {
color: white;
position: relative;
}

.conversation {
margin: 0 auto;
padding: 40px 0;
width: 50%;
min-width: 300px;
position: relative;
margin: auto;
list-style: none;
}

.conversation li {
padding: 20px;
color: #FFF;
background: rgba(0,0,0,0.75);
}

.conversation li.odd {
background: rgba(255,255,255,0.75);
color: black;
}

.answer-avatar {
float: left;
margin: 0 20px 20px 0;
}


/* ==========================================================================
Link / Quote Posts
========================================================================== */


.link h3 {
margin: auto;
position: relative;
font-size: 24px;
text-align: center;
color: #FFF;
}

.link h3 a {
text-decoration: none;
text-indent: -30px;
}

.link h3 a:hover {
text-decoration: underline;
}

.quote, .link {
padding: 60px 0 70px;
}

.quote .quote-text {
text-align: center;
position: relative;
margin: auto;
padding: 0 20%;
}

.quote blockquote {
margin: 0;
font-size: 24px;
font-weight: bold;
color: white;
}

.quote .source,
.quote .source ~ p {
color: #FFF;
opacity: 0.75;
font-size: 16px;
font-weight: bold;
}

.quote .source a {
color: white;
text-decoration: underline;
}

/* ==========================================================================
Audio / Video Posts
========================================================================== */

.audio_player {
width: 100%;
margin: auto;
height: 100%;
}

.tumblr_audio_player {
width: 100%;
height: 100%;
position: relative;
margin: auto;
opacity: 0.9;
}

.audio.post-bg {
background-repeat: no-repeat;
background-size: stretch;
}

.audio.post-bg > span {
width: 100%;
height: 100%;
display: block;
display: box;
display: flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

.video iframe {
display: block;
width: 100%;
height: 100%;
min-width: 300px;
margin: auto;
position: relative;
}

.video .spotify_audio_player,
.video .bandcamp_audio_player {
width: 300px;
height: auto;
position: relative;
}

/* ==========================================================================
Post Notes
========================================================================== */

.notes {
padding: 0;
margin: 0;
background: #222;
}

.notes li {
display: block;
padding: 10px;
text-align: center;
}

.notes li:nth-child(even) {
background: #111;
}

.notes li .avatar_frame {
display: inline-block;
vertical-align: middle;
padding-right: 10px;
}

.notes li .avatar_frame img {
width: 100%;
height: 100%;
}

.notes li .action {
color: #ccc;
}

.notes li .action a {
color: #fff;
text-decoration: none;
}

.notes li .action a:hover {
text-decoration: underline;
}

#disqus_block {
background:#f6f6f6;
padding: 30px 0;
}

#disqus_thread {
width: 50%;
margin: 0 auto;
min-width: 300px;
}


.Loading {
text-align: center;
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #111;
color: #fafafa;
font-size: 1.3em;
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);

-webkit-transition: all 100ms;
-moz-transition: all 100ms;
-ms-transition: all 100ms;
-o-transition: all 100ms;
transition: all 100ms;
}

.infinite-scrolling .Loading {
display: block;
}

.infinite-scrolling.is-loading .Loading {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}

.Loading i {
display: inline-block;
-webkit-animation: fa-spin 0.6s infinite linear;
}

.infinite-scrolling.index-page.is-loading {
padding-bottom: 45px;
}

.infinite-scrolling.index-page nav.pages-nav {
position: absolute;
left: -100vw;
height: 1px;
overflow: hidden;
}

#attribution {
padding: 10px;
text-align: center;
background: black;
border-top: 1px solid black;
}

#attribution p {
margin: 0;
color: #555;
font-size: 12px;
}

#attribution a {
color: #555;
}

a.install {
position: fixed;
top: 30px;
right: 3px;
white-space: nowrap;
outline: 0;
text-decoration: none;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
font: 600 12px/18px "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
height: 20px;
padding: 0 5px;
line-height: 18px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition-property: padding;
-moz-transition-property: padding;
-ms-transition-property: padding;
-o-transition-property: padding;
transition-property: padding;
-webkit-transition-duration: .1s;
-moz-transition-duration: .1s;
-ms-transition-duration: .1s;
-o-transition-duration: .1s;
transition-duration: .1s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-ms-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
color: #fff;
border: 1px solid rgba(0,0,0,0.18);
background: #3e3e3e;
background: rgba(0,0,0,0.38);
text-shadow: 1px 1px 0 rgba(0,0,0,0.08);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
color: #fff;
z-index: 104;

}

/* ==========================================================================
Media Queries
========================================================================== */

@media only screen and (min-device-width: 1025px) {
.container {
width: 100vw;
height: 100vh;
}

.title a {
opacity: 0.8;
}

.title a:hover {
opacity: 1;
}

.title h1 {
word-wrap: normal;
}

.title.index-title {
padding: 0;
}

.title.index-title a {
opacity: 1;
}

.title.index-title .title-text {
top: 20%;
}

.title h2 {
margin-left: 50px;
margin-right: 50px;
}

.title-text {
position: relative;
top: 0;
padding: 30px 0;
}

.post {
width: 100vw;
height: 100vh;
min-height: 480px;
}

.post.inline {
height: auto;
min-height: auto;
}

.post-bg {
background-size: contain;
background-attachment: fixed;
background-repeat: no-repeat;
}

.post-bg.tile {
background-size: contain;
}

.post-bg.fill {
background-size: cover;
}

.post-bg.center {
background-size: contain;
background-repeat: no-repeat;
}

.quote, .link {
padding: 0;
}

.link h3 {
font-size: 32px;
}

.quote blockquote {
font-size: 32px;
}

.quote .source {
font-size: 20px;
}


.text-block {
font-size: 20px;
width: 600px;
}


.audio_player {
width: 30vw;
margin: auto;
height: 125px;
}

.tumblr_audio_player {
width: 100%;
height: 100%;
position: relative;
top: 40%;
-webkit-transform: translate(0,0) !important;
}

.video iframe {
display: block;
width: 100vw;
height: 100vh;
margin: 0 auto;
position: relative;
top: 0;
}

.video .spotify_audio_player,
.video .bandcamp_audio_player,
.video .soundcloud_audio_player {
margin: auto;
}

.video .bandcamp_audio_player {
width: 500px;
height: auto;
}

.video .spotify_audio_player {
width: auto;
height: 50%;
}

#disqus_thread {
min-width: 500px;
}

#attribution {
padding: 20px;
font-size: 14px;
}
}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
}



{CustomCSS}
</style>
{block:IfGoogleAnalyticsID}<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{text:Google Analytics ID}']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>{/block:IfGoogleAnalyticsID}
</head>
<body>
<a href="http://fixed.andrevv.com" target="_blank" class="install"><i class="fa-arrow-circle-down fa"></i> Install theme</a>
<div class="container {block:IndexPage}index-page{/block:IndexPage} {block:IfInfiniteScrolling}infinite-scrolling{/block:IfInfiniteScrolling}">
<div class="title {block:IndexPage}index-title{/block:IndexPage}">
<div class="title-text">
<h1><a href="/">{Title}</a></h1>
{block:IndexPage}
{block:IfShowDescription}
<h2>{Description}</h2>
{/block:IfShowDescription}
{/block:IndexPage}
</div>
</div>


{block:Posts}
<article class="post {TagsAsClasses}
{block:PermalinkPage}single{/block:PermalinkPage}
{block:Text}post-text{/block:Text}
{block:Quote}post-quote{/block:Quote}
{block:Link}post-link{/block:Link}
{block:Video}post-video{/block:Video}
{block:Audio}post-audio{/block:Audio}
{block:Photo}post-photo{/block:Photo}
{block:Photoset}post-photoset{/block:Photoset}
{block:Panorama}post-panorama{/block:Panorama}
{block:Chat}post-chat{/block:Chat}
{block:Answer}post-answer{/block:Answer}
">
{block:Text}
<div class="text post-bg">
<div class="text-block">
{block:Title}<h3>{Title}</h3>{/block:Title}
{Body}
</div>

</div>
{/block:Text}
{block:Quote}
<div class="quote post-bg">
<div class="quote-text">
<blockquote class="words {Length}">{Quote}</blockquote>
{block:Source}<p class="source">&mdash; {Source}</p>{/block:Source}
</div>
</div>
{/block:Quote}
{block:Link}
<div class="link post-bg">
<h3><i class="fa fa-link"></i> <a href="{URL}" {Target}>{Name}</a></h3>
</div>
{block:Description}<div class="caption"><span>{Description}</span></div>{/block:Description}
{/block:Link}
{block:Video}
<div class="video post-bg">
{Video-700}
</div>
{block:Caption}<div class="caption"><span>{Caption}</span></div>{/block:Caption}
{/block:Video}
{block:Audio}
<div class="audio post-bg" {block:AlbumArt}style="background-image: url({AlbumArtURL})"{/block:AlbumArt}>
{AudioPlayerBlack}
</div>
{block:Caption}<div class="caption"><span>{Caption}</span></div>{/block:Caption}
{/block:Audio}
{block:Photo}
<div class="photo post-bg {select:Photos}" style="background-image:url({PhotoURL-HighRes})" alt="{PhotoAlt}">
{LinkOpenTag}{LinkCloseTag}

</div>
{block:Caption}<div class="caption">
<span>{Caption}</span>
</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
{block:Photos}
<div class="photoset post-bg {select:Photos}" style="background-image:url({PhotoURL-HighRes})" alt="{PhotoAlt}">
{LinkOpenTag}{LinkCloseTag}
</div>
{block:Caption}<div class="caption"><span>{Caption}</span></div>{/block:Caption}
{/block:Photos}
{block:Caption}<div class="caption"><span>{Caption}</span></div>{/block:Caption}
{/block:Photoset}

{block:Panorama}
<div class="post-bg panorama {select:Photos}" style="background-image:url({PhotoURL-HighRes})" alt="{PhotoAlt}">
{LinkOpenTag}{LinkCloseTag}
</div>
{block:Caption}<span class="caption"><span>{Caption}</span></span>{/block:Caption}
{/block:Panorama}

{block:Chat}
<div class="chat post-bg">
{block:Title}<h3>{Title}</h3>{/block:Title}
<ul class="conversation">
{block:Lines}
<li class="line {Alt}">
{block:Label}<span class="person">{Label}</span>{/block:Label}
<span class="person-said">{Line}</span>
</li>
{/block:Lines}
</ul>
</div>
{/block:Chat}
{block:Answer}
<div class="answer text post-bg">
<div class="text-block">
<img class="answer-avatar" src="{AskerPortraitURL-40}" />
{Asker}
{Question}
{Answer}
</div>
</div>
{/block:Answer}

{block:IndexPage}
<div class="meta">
<ul>
<li class="more-link">
<a href="{Permalink}">+</a>
</li>
</ul>
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div class="meta">
<ul>
<li>
{block:Date}
{block:NewDayDate}{ShortMonth} {DayOfMonth}{/block:NewDayDate}
{block:SameDayDate}{ShortMonth} {DayOfMonth}{/block:SameDayDate}
{/block:Date}
</li>
{block:NoteCount}
<li>
<i class="fa fa-heart"></i> {NoteCount}
</li>
{/block:NoteCount}
</ul>
</div>
{/block:PermalinkPage}

</article>
{/block:Posts}

<footer>

<div class="Loading"><i class="fa fa-circle-o-notch fa-spin"></i></div>

{block:Pagination}
<nav class="pages-nav">
{block:PreviousPage}
<a href="{PreviousPage}" class="back">
<span class="arrow">&larr;</span>
</a>{/block:PreviousPage}{block:NextPage}<a href="{NextPage}" class="forward">
<span class="arrow">&rarr;</span>
</a>{/block:NextPage}
<div class="clear"></div>
</nav>
{/block:Pagination}
{block:PermalinkPagination}
<nav>
{block:PreviousPost}
<a href="{PreviousPost}" class="forward">
<span class="arrow">&rarr;</span>
</a>{/block:PreviousPost}{block:NextPost}<a href="{NextPost}" class="back">
<span class="arrow">&larr;</span>
</a>{/block:NextPost}
<div class="clear"></div>
</nav>
{/block:PermalinkPagination}

{block:PermalinkPage}

{block:PostNotes}
<div class="post-notes" id="notes">
{PostNotes-64}
</div>
{/block:PostNotes}

{block:IfDisqusShortname}
<div id="disqus_block">
<div id="disqus_thread"></div>
</div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '{text:Disqus Shortname}'; // Required - Replace example with your forum shortname

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

{/block:IfDisqusShortname}
{/block:PermalinkPage}

<div class="clear"></div>

<!-- PLEASE DON'T REMOVE. THIS THEME IS A GIFT FROM ME TO YOU <3 -->

<div id="attribution">
<p>
<a href="http://fixed.andrevv.com/">Fixed. theme</a> by <a href="http://andrevv.com" target="_blank">Andrew McCarthy</a>
</p>
</div>

<!-- </3 -->
</footer>

</div>

{block:IfInfiniteScrolling}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/JavaScript"></script>
<script src="http://static.tumblr.com/54tapni/EDTnl3s3c/jquery.autopager-1.0.0.js" type="text/JavaScript"></script>
<script type="text/javascript">
$.autopager({
link : 'nav.pages-nav .forward',
content: 'article.post',

// enable/disable scroll loading
autoLoad: true,

// initial page number
page: {CurrentPage},

// where contents would be appended.
// use "appendTo" or "insertBefore"
insertBefore: 'footer',
// insertBefore: '#footer',

// a callback function to be triggered when loading start
start: function(current, next) {
$('.infinite-scrolling').addClass('is-loading');
},

// a function to be executed when next page was loaded.
// "this" points to the element of loaded content.
load: function(current, next) {
$('.infinite-scrolling').removeClass('is-loading');
}
});
</script>
{/block:IfInfiniteScrolling}

{block:IfDisqusShortname}
<script type="text/javascript">
var disqus_shortname = '{text:Disqus Shortname}';

(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
{/block:IfDisqusShortname}
<div class="MenuStuff
{block:AskEnabled}Ask{/block:AskEnabled}
{block:SubmissionsEnabled}Submit{/block:SubmissionsEnabled}
{block:HasPages}Pages{/block:HasPages}
">
<input type="checkbox" id="ShowMenu" />
<div id="menu">
<h3>Menu</h3>
<ul class="{block:AskEnabled}Ask{/block:AskEnabled} {block:SubmissionsEnabled}Submit{/block:SubmissionsEnabled}">
{block:AskEnabled}
<li><a href="/ask">{AskLabel}</a></li>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<li><a href="/submit">{SubmitLabel}</a></li>
{/block:SubmissionsEnabled}
</ul>
{block:HasPages}
<ul class="Pages">
{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}
</ul>
{/block:HasPages}


</div>
<label for="ShowMenu">
<span></span>
</label>
</div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 15 2016, 03:32 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,660
Joined: 10-August 06
Member No.: 7
This looks like Tumblr code, so I move the thread.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 16 2016, 11:58 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
You could try using: background-size: cover;.

See :
- http://academyoftumblr.tumblr.com/post/121...ackground-image
- http://css3files.com/background/
- http://caniuse.com/#search=background-size
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 07:23 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC