back image into html body class

  • Resolved jgoldberg2013

    (@jgoldberg2013)


    11 years, 9 months ago

    I have been trying to do this for about four hours with every combination possible.
    I am working off a localhost so I sadly can not provide a link.
    All I am tryng to do is get the back ground image to fit in the body of a page.
    This is all I ave done that has come closest to what I bneed but there are freaking margins and padding that I can get rif off.
    PLEASE SOMEONE HELP.

    <body class="page page-id-84 page-parent page-template page-template-full-width-page-php logged-in admin-bar custom-background customize-support">
<div id="container" class="hfeed">
<div id="header">
<div id="wrapper" class="clearfix">
<div id="content-full" class="grid col-940">
<div id="post-84" class="post-84 page type-page status-publish hentry">
<h1 class="entry-title post-title">OUR CLIENTS</h1>
<div class="post-entry">
<p> </p>
</div>
<div class="post-edit">
<a class="post-edit-link" title="Edit Page" href="https://localhost/coinlogistics/wp-admin/post.php?post=84&action=edit">Edit</a>
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="clearfix">

    THIS IS THE CSS I HAVE GOTTEN CLOSEST TO.

    /*----------->>>>>>>>>>>>>>>>>>>>>>>>> START OF SECTORS & INDUSTRY CUSTOM ---------------------------*/

#post-84 .post-edit {
   position: absolute !important;
   top: -9900px !important;
   left: -9999px !important;
}
body #wrapper .post-84 {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
#post-84 .post-entry {
   position: absolute !important;
   top: -9999px !important;
   left: -9899px !important;
}
#wrapper .post-84 {
  background: url(https://localhost/coinlogistics/wp-content/uploads/2013/05/background.jpg);
  background-position: top; right;
  width: 100%;
  height: 653px;
}

    Firebug shows it isi the wrapper but I cleared all padding and margins as shown above.
    Image of screen linked.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter jgoldberg2013

    (@jgoldberg2013)

    https://imgh.us/BODY_IMAGE_iisue.jpg
    sorry – link did not show in preveious post

    I sadly can not provide a link.

    Yes, that makes it next to impossible to help with CSS.

    Why do you have Firebug set to “layout”? What does it show under “style”? That should show you where those margins or padding are coming from.

    Have you made sure your HTML and CSS don’t have errors that are relevant?

    Why all the !important and absolute positioning. Both make CSS quite problematic.

    Given that you appear to be using the Responsive theme, have you tried posting on the theme’s dedicated forum: https://cyberchimps.com/forum/free/responsive/

    As WPyogi said, you should not be using !important so freely. In general, if you find yourself having to use it more than once or twice, you should stop and re-consider your whole approach because something is seriously wrong.

    Thread Starter jgoldberg2013

    (@jgoldberg2013)

    I absolutely agree.
    ignore the absolute positioning and !important stuff.
    the problem is that the #wrapper has the padding around it.
    I need to remove it from this one page. Page-id-84.
    Problem I am having is trying to find a tag I can use so ot only effects this one page. The onlt thing I can find is the body class="" to identify the wrapper for this page.
    I have tried to clear it with `body #wrapper .post-84 {
    padding: 0;
    border: 0;
    width: 100%;
    background: #fff;
    background: url(https://localhost/coinlogistics/wp-content/uploads/2013/05/background.jpg) no-repeat;
    position: top; right;
    height: 653px;
    }`
    but that did not work. Please help.

    IS this Responsive? Unmodified? What is in the body tag when you use View Source ?

    The selectors you are trying to use will NOT target the page – .post-84 is not related to the page at all.

    If what you have above is correct, try:

    body.page-id-84 #wrapper {
...
}

    Thread Starter jgoldberg2013

    (@jgoldberg2013)

    I have tried that one – does not work.
    PS – https://cyberchimps.com/forum-topic gives this answer when asking about coding…
    Bryan Hadaway
    Keymaster
    CSS assistance is reserved for the pro forum.
    Its a new thing as last week they were very good at assisting us newbies….
    ———————————————————–
    Issue is I just cant tag the wrapper which has the padding I need to remove.
    Here is a clean page with same template for you to see.

    <body class="page page-id-204 page-template page-template-full-width-page-php logged-in admin-bar no-customize-support custom-background">
       <div id="container" class="hfeed">
         <div id="header"> .......
</div><!-- end of #header -->

	    <div id="wrapper" class="clearfix">
<div id="content-full" class="grid col-940">
    div id="post-204" class="post-204 page type-page status-publish hentry">       

<h1 class="entry-title post-title">test</h1>
                <div class="post-entry">
            </div><!-- end of .post-entry -->
  <div class="post-edit"><a class="post-edit-link" href="https://localhost/coinlogistics/wp-admin/post.php?post=204&action=edit" title="Edit Page">Edit</a></div>
			</div><!-- end of #post-204 -->       

</div><!-- end of #content-full -->

	    </div><!-- end of #wrapper -->
    </div><!-- end of #container -->
<div id="footer" class="clearfix">

    For that specific page, you should be able to use:

    body.page-id-204 #wrapper {
   background-image url(....);
}

    I just installed Responsive on a test site and have no margins or padding with a background using the above…

    So there must be something going on with your site – which I can’t possibly know without seeing it, sorry.

    Thread Starter jgoldberg2013

    (@jgoldberg2013)

    started fresh with a new page and yes your suggstion did work.
    Thank you. Have no idea what went wrong.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘back image into html body class’ is closed to new replies.