Make the background applicable only for the first frame

  • Resolved tryspecials

    (@tryspecials)


    10 years, 11 months ago

    Hi,

    I am trying to make the background disappear when the user scrolls down. But in the current situation how much ever i try the background keeps covering the whole page irrespective of the page size.

    I am a newbie at coding and not able to fix it. Here is an example of what I am trying to achieve http://bakkenbaeck.com/

    Meanwhile, here is the code that I am using to put the background in there.

    body.home {
background-image:     url(/wp-content/uploads/2015/06/tryspecials.jpg);
background-position: center bottom;
background-repeat: no-repeat;
position: relative;
width: 100%;
background-size: cover;
min-height: 650px;
}

    Thanks,
    Rohit

Viewing 11 replies - 1 through 11 (of 11 total)
  • rdellconsulting

    (@rdellconsulting)

    10 years, 11 months ago

    I presume that is not your site, so do you have a site link?

    With that link, you could add a background image that sticks on the viewable page throughout the whole scroll to footer.

    Thread Starter tryspecials

    (@tryspecials)

    10 years, 11 months ago

    Yes, http://tryspecials.com

    That is my site link, should have included that earlier. The cover that i have added keep filing the page no matter how much content i add into the body. All I am trying to do is to make it only act as background for the first viewable frame.

    Thanks.

    rdellconsulting

    (@rdellconsulting)

    10 years, 11 months ago

    My monitor is 1920 x 1080 and the page you linked fills only half(ish) the screen. Nothing to scroll so can’t see problem yet.

    But to achieve a disappearing background will need javascript.

    Thread Starter tryspecials

    (@tryspecials)

    10 years, 11 months ago

    My ignorance. I didn’t add content underneath for scrolling but since I didn’t want it to appear with background showing everywhere (on the live site).

    This is what I wanted (something that is in Eteroxee’s response here on this link) – http://stackoverflow.com/questions/16601590/how-to-make-div-bg-image-fit-full-screen-and-allow-scrolling-for-content-underne

    I had come across that earlier but didn’t quite understand it. Now I made a few changes and everything is good as I wanted. It’s still on my dev version so haven’t pushed it here but it will be out soon. Thanks for your help Dave, thanks for trying with only half information from my end.

    Just made these changes to the code and it happened.

    body.home {
background-image:     url(/wp-content/uploads/2015/06/tryspecials.jpg);
background-repeat: no-repeat;
position: relative;
width: 100%;
background-height : 600px;
}

    Thanks,
    RS

    mrinternational

    (@mrinternational)

    10 years, 11 months ago

    @tryspecials a little out of context, but I would suggest you follow this tutorial so that you facebook cover is less pixalated: https://www.dessol.com/blog/avoid-blurrypixelated-facebook-cover-photos/

    Also, if you could tell me how to change the copyright info in the footer to just have your text and not all the ”Designed by..”that would be greatly appreciated! 🙂

    rdellconsulting

    (@rdellconsulting)

    10 years, 11 months ago

    Try these Snippets @mrinternational:

    Snippet1

    Snippet2

    mrinternational

    (@mrinternational)

    10 years, 11 months ago

    Thank so much @rdellconsulting, but can you help me with this: ”to override “Designed by Press Customizr” link, put your custom credits inside the $credits variable (line 3).”

    In witch file do I change the line 3?

    Thank you so much for your time again!

    rdellconsulting

    (@rdellconsulting)

    10 years, 11 months ago

    Input your html (as instructed above) in the code below and add it to your child theme’s functions.php

    mrinternational

    (@mrinternational)

    10 years, 11 months ago

    Hey @rdellconsulting, I’m really sorry as I am very new to this, but I still don’t quite understand. Do I paste:

    ”add_filter(‘tc_credits_display’, ‘my_custom_credits’);function my_custom_credits(){ $credits = ”;$newline_credits = ”;return ‘<div class=”span4 credits”> <p> · © ‘.esc_attr( date( ‘Y’ ) ).’ ‘.esc_attr(get_bloginfo()).’ · ‘.($credits ? $credits : ‘Designed by Press Customizr‘).’ ·’.($newline_credits ? ‘
    · ‘.$newline_credits.’ ·’ : ”).'</p> </div>’;}”

    In the Appearance>Editor>functions.php? And I just put the text I want in the ‘ ‘ after $credits =?

    Thread Starter tryspecials

    (@tryspecials)

    10 years, 10 months ago

    @mrinternational

    Sorry if I am too late to chime in. If you still need then this is how you can put custom credits. You need to put this in functions.php file (the best way to do that is to use a child theme, see this link excellent link here on how to create a child theme) 

    add_filter('tc_credits_display', 'my_custom_credits');
function my_custom_credits(){
$credits = '';
$newline_credits = '';
return '
<div class="span4 credits">
    		    	<p>&middot; &copy; Your Company Name Goes Here &middot; All Rights Reserved &middot;</p>		</div>';
}
    mrinternational

    (@mrinternational)

    10 years, 10 months ago

    @tryspecials I had managed, but thank you very much!

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Make the background applicable only for the first frame’ is closed to new replies.