Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • September 23, 2016 at 2:48 pm #690774
    JennyGr

    Hi I want a background image on my blog page and blog posts only. Not anywhere else on the site. Can you advise please?

    Many thanks

    Jenny

    September 23, 2016 at 2:58 pm #690786
    Yigit

    Hey JennyGr,

    Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Yigit

    September 23, 2016 at 3:42 pm #690843
    JennyGr

    Just a background image behind the white main content area like the brown area on this page http://phillywaldorf.com/development/ways-to-give/ but I only want it on the blog page and blog posts. Just to give the Blog area a slightly different feel from the rest of the site.

    Thanks

    Jenny

    September 28, 2016 at 7:35 am #692512
    JennyGr

    Hi just wondering if you have been able to look at this issues yet?

    Many thanks

    Jenny

    September 28, 2016 at 10:24 am #692545
    Ismael

    Hi,

    I’m sorry for the late response. You can use something like this in the Quick CSS field:

    .blog .container_wrap_first {
    background: url(/wp-content/uploads/2013/08/main-bg_tile.jpg) #F5F5F5;
}

    Adjust the image url.

    Best regards,
    Ismael

    October 1, 2016 at 2:32 am #694127
    JennyGr

    Hi Ismael that worked to give me a background image over the whole page, but I want the main content areas to stay white like this http://phillywaldorf.com/development/ways-to-give/ any adive?

    Thaknks

    Jenny

    October 4, 2016 at 6:06 am #694874
    Ismael

    Hi,

    I’m sorry but that is not possible because the content is wrapped inside a single container. This is quite possible with the theme but you have to switch to boxed layout. Go to the General Layout > Layout panel then add this in the functions.php file:

    add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
	function a() {
		var blog = $('body').hasClass('blog');
		if(!blog) return;
		$('html').css({
			'background' : 'url(/wp-content/uploads/2013/08/main-bg_tile.jpg) #F5F5F5'
		});
	}

	a();
})(jQuery);
</script>
<?php
}

    Best regards,
    Ismael

    October 30, 2016 at 12:00 am #705704
    JennyGr

    Thanks Yigit, nearly there (trying it on a different site of mine taht uses enfold boxed layout. But how can I have the background image stretch instead of tile? Code in private content below

    October 30, 2016 at 12:02 am #705705
    JennyGr

    Page is in private content

    October 30, 2016 at 12:06 am #705706
    JennyGr

    Would be happy for it to just be centred rather than spread like this page http://phillywaldorf.com/blog/reading-in-waldorf-schools/

    October 30, 2016 at 8:17 am #705772
    Vinay

    Hi,

    It’s not clear what you are trying to achieve. Please elaborate the issue or point us to a mockup reference you can upload the mockup to imgur.com and share the link here.

    Best regards,
    Vinay

    October 31, 2016 at 12:26 pm #706091
    JennyGr

    HI Vinay I’m trying to achieve a background image as in the attached website. At the moment the image is tiling, and I don;t want it to

    November 1, 2016 at 10:02 am #706630
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    Please feel free to change the url for the background image in the below code.

    @media only screen and (min-width: 768px){
.html_header_top.html_header_sticky #top.blog #wrap_all #main,
.html_header_top.html_header_sticky #top.single-post #wrap_all #main {
    max-width: 70vw!important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}}
.wrap_all {
	background: url(/wp-content/uploads/2013/08/main-bg_tile.jpg) #F5F5F5;
	background-size: cover;
	background-position: fixed;
}

    Please check attached screenshot. The code will make the blog archive and post page look like a boxed layout and we add a background image via css to it’s parent div.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.