Kenneth: /* Stretch Background Image */

2018-05-14T22:58:48Z

Stretch Background Image

New page

== Hide Poster ==

Layout -> Configure Blog Posts
* deselect Posted by

== Hide Powered By ==

<pre>
/* Hide "Powered by" */
#Attribution1 {
font-size: xx-small;
color: white;
visibility: hidden;
}
</pre>

Or Edit Theme HTML, Jump to #Attribution1, and delete all of this:
<pre>

<b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>...</b:widget>
</b:section>
</pre>

== Hide Comments from Pages ==

== Pre ==

<pre>
pre {
overflow: auto;
border: 1px solid black;
padding: .5em;
}
</pre>

horizontal scrolling:
<pre>
pre {
overflow: auto;
word-wrap: normal;
white-space: pre;
}
</pre>

<pre>
<pre style="overflow: auto; word-wrap: normal; white-space: pre;"
</pre>

== Add CSS ==

<pre>
body {
background-repeat:no-repeat;
background-size:cover;
}

#Attribution1 {
font-size: xx-small;
color: white;
visibility: hidden;
}

h2 {
font-size: large;
color: black;
}

.descriptionwrapper {
visibility: hidden;
}

.blog-feeds {
visibility: hidden;
}

.home-link {
visibility: hidden;
}

pre {
overflow: auto;
border: 1px solid black;
padding: .5em;
}

img.photoframe {
border: 20px solid black;
}

img.thinphotoframe {
border: 5px solid black;
}

/*
.tabs-inner .widget ul {
background: none;
background-color: #005A9C;
}
*/
</pre>

<pre>
body {
background-repeat:no-repeat;
background-size:cover;
}

#Attribution1 {
font-size: xx-small;
}

.description {
font-weight:bold;
}

h2 {
font-size: large;
color: black;
}

pre {
overflow: auto;
border: 1px solid black;
padding: .5em;
}
</pre>

<pre>
#Attribution1 {
font-size: xx-small;
color: white;
visibility: hidden;
}

h2 {
font-size: large;
color: black;
}

.descriptionwrapper {
visibility: hidden;
}

.blog-feeds {
visibility: hidden;
}

.home-link {
visibility: hidden;
}

pre {
overflow: auto;
border: 1px solid black;
padding: .5em;
}

img.photoframe {
border: 20px solid black;
}

img.thinphotoframe {
border: 5px solid black;
}

.tabs-inner .widget ul {
background: none;
background-color: #005A9C;
}
</pre>

== Hide Follow By Email ==

Only show on Posts:

Edit HTML: (add b:if statement) [http://www.internetsmash.com/2015/10/blogger-conditional-tags.html] [http://technicallyeasy.net/2008/07/how-to-show-elements-when-viewing-posts/] [http://www.mybloggertricks.com/2011/01/how-to-show-and-hide-widgets-in-blogger.html] [http://helplogger.blogspot.com/2012/03/hideshow-widgetsgadgets-in.html]
<pre>
<b:section-contents id='footer-1'>
<b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "index" or data:blog.pageType == "item"'>
...
</b:if>
</b:includable>
</b:widget>
</b:section-contents>
</pre>

== Hide Subscribe to Post Atom ==

Subscribe to: Posts (Atom)

<pre>


</pre>

To only show on post pages:

<pre>

<b:if cond='data:blog.pageType == "index" or data:blog.pageType == "item"'>
<b:include name='feedLinks'/>
</b:if>
</pre>

== Stretch Background Image ==

Better:
<pre>
/* Stretch Background Image */
body {
background-repeat:no-repeat;
background-size:cover;
}
</pre>

---

<pre>
html, body {
background: url('bgimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</pre>

Chang bgimage.jpg to your url

Ref: https://www.stramaxon.com/2013/01/full-page-background-blogger.html

== Hide Background on Mobile ==

<pre>
@media only screen and (max-width: 640px){ body { background-image: none !important; } }
</pre>

ref: https://theme-fusion.com/knowledgebase/how-to-hide-full-width-background-images-on-mobile/

== keywords ==

[[Category:Google]]

Google/Blogger - Revision history

Kenneth: /* Stretch Background Image */