WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [theme: raindrops] custom background image does not stay fixed (7 posts)

  1. teddy_refspin
    Member
    Posted 1 year ago #

    Hi there,

    I have a custom background image applied to this theme that I would like to have remain fixed. The options appear to be applied but actually scrolling down the page, the image is not staying fixed. I was going to see if the CSS code had been applied properly but I can't even locate the background-image tag. If it's stored inside the database I'm outta luck until our hosting provider fixes access to phpMyAdmin...

    Thanks in advance.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    There is no background image tag -- it's set in the CSS code -- so look in your style.css file.

    This should help you figure out if the CSS is correct for fixed background images:

    http://www.w3schools.com/css/css_background.asp

  3. teddy_refspin
    Member
    Posted 1 year ago #

    WPyogi,

    Sorry my bad I meant "property".

    The problem is that the CSS I'm looking for does not exist in style.css. I don't know where it's coming from. It could just be my being a theme newb but one would think it would actually use the main stylesheet. Otherwise what's it for?

    I tried removing the background image from within the dashboard and injecting the CSS code in manually using the provided link as guidance to make sure I did it right:

    body{
    	background-image:url('http://path/to/image/that/i/know/actually/works/background.jpg');
    	background-repeat:no-repeat;
    	background-position:center top;
    	background-attachment:fixed;
    }

    Upon refreshing the page, the image does not appear.

    Am I doing it wrong?

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    No way to help unless you post a link to your site. Try using Firebug to look at the CSS code -- it also shows where the specific CSS code is located (i.e. which stylesheet, internal or inline). If you are using plug-ins, many have their own stylesheets. Some themes also put customized CSS in a separate stylesheet as well or in internal CSS.

  5. teddy_refspin
    Member
    Posted 1 year ago #

    My apologies I get weird about sharing unfinished work :) I haven't done this in a long time...

    http://www.drrd.ca/

    I set things back and activated firebug.

    After doing a combination of view source and loading firebug it looks like the theme is dumping a ton of CSS onto a single line (33) from within the index.php page. Firebug chose to focus on the background property:

    body {
        background: url("http://www.drrd.ca/wordpress/wp-content/uploads/2012/06/backgroundtexture2.jpg") repeat scroll 0 0 #2B1302; }

    When I changed it in the firebug console it works:

    body {
        background: url("http://www.drrd.ca/wordpress/wp-content/uploads/2012/06/backgroundtexture2.jpg") no-repeat fixed 0 0 #2B1302; }

    So I guess I just have to find this bit of code and manually edit it...

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    No problem -- I understand that...

    Yeah, it looks like it IS being set inline. You could try overriding that using !important in the external CSS:

    body {
        background-attachment: fixed !important;
        background-image: url("http://www.drrd.ca/wordpress/wp-content/uploads/2012/06/backgroundtexture2.jpg");
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }

    That seems to work in Firebug...

  7. teddy_refspin
    Member
    Posted 1 year ago #

    That definitely worked. Thanks so much for your help!

Topic Closed

This topic has been closed to new replies.

About this Topic