WordPress.org

1. teddy_refspin
   Member
   Posted 11 months 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 11 months 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 11 months 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 11 months 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 11 months 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 11 months 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 11 months ago #
   

   That definitely worked. Thanks so much for your help!

Reply

You must log in to post.