Change page background image

  • Resolved Mousie

    (@melinayung)


    10 years, 6 months ago

    Hi I have a page that I wish to change the background on for ONLY that page.

    https://www.jpscoatings.com.au/dry-mix-renders

    Are you able to advise what I need to use to achieve this. Basically I am needing the coloured bottom section in the brownish colour to reach across width-wise, in the content area, instead of stopping in just the table section. So that it looks like this page https://www.jpscoatings.com.au/product-category/dry-mix-renders

    I was thinking of using a repeatable background image of the white top and brown bottom as the image.

    Please don’t ask WHY i’m doing it like this, it is what a client wants and I can’t convince them any other way. I know it’s bad coding etc etc but this was the only solution I can come up with to achieve the end result they want ??

    I have tried using all suggestions I’ve found to change single backgrounds but as this site was created by someone else using a custom theme, i’m not sure what I need to put in the CSS to make the #content.add section have a different background

    Thanks

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

  • Your site uses body classes (This means every page, post, archive, etc can have custom CSS).

    https://codex.www.ads-software.com/Function_Reference/body_class

    Line 58 of first url above:

    <body class="body-class-page body-class-page-id-230 body-class-page-template-default">

    Line 47 of second URL:

    <body class="body-class-archive body-class-tax-product-category body-class-term-dry-mix-renders body-class-term-5">

    You can target the unique CSS class for each page or page type (or more) and include a custom background per:
    https://www.w3schools.com/cssref/css3_pr_background.asp

    So, as an example:

    .body-class-page-id-230 {
background: #00ff00 url('https://www.jpscoatings.com.au/product-category/images/smiley.gif') no-repeat fixed center;
}

    (please review all properties of at link given)

    Above assumes image file smiley.gif is uploaded to /images/ folder

    Such CSS work is best done in Child Theme, Custom CSS plugin, or theme provided custom CSS option as edits to parent themes are lost on theme update.

    Thread Starter Mousie

    (@melinayung)

    Thank you so much Pioneer Valley. I will try this out ??

    Thread Starter Mousie

    (@melinayung)

    Hi Pioneer Valley. I’ve tried to give this a go, but i’m not that advanced with coding. Its the section #content.add that I want to change the background on but i’m not sure what to put in the code to achieve this.

    You have errors in HTML in the page you are trying to change:

    <td style="border: none; background-color: #fff;" height="100;">

    Below would fix that:

    <td style="border: none; background-color: #fff; height: 100px;">

    But, you should avoid inline styling. Apply a class and then add that class in CSS.

    in HTML:

    <td class="new1">

    in CSS:

    .new1 {
border: none;
background-color: #fff;
height: 100px;
}

    For more items to fix (such errors can and will lead to the results and issues you are having), see:

    https://validator.w3.org/check?uri=http%3A%2F%2Fwww.jpscoatings.com.au%2Fdry-mix-renders&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1#line-92

    Thread Starter Mousie

    (@melinayung)

    Absolute Legend! Thank you I will get on to all these errors and being that I am self taught you have just shown me the importance of doing things properly and not being lazy! I’ll let you know how I go once i’ve fixed all errors.

    Thread Starter Mousie

    (@melinayung)

    OK all errors now fixed on this page, but background still not showing ??
    …actually i can see it showing as the page background but I wanted it in the #content.add area of just that one page (id 230)

    Great. Now we also note that the two pages do not use the same HTML (or CSS).

    For /dry-mix-renders/ we see:

    <div id="content" class="add">
<h1>DRY MIX RENDERS</h1>
<div class="staticell">
<table>
<tbody>
<tr>
<td class="staticprod">
<p style="font-size: 20px;">These products are substitutes for a standard cement render. Each product is unique to their application; whether it is on a commercial or domestic property.</p>
</td>
</tr>
</tbody>
</table>
<table class="statictbl">
<tbody>
<tr>
<td

    For /product-category/dry-mix-renders/ we see

    <div id="content">
<header class="main-heading">
<h1>DRY MIX RENDERS</h1>
<p>These products are substitutes for a standard cement render.  Each product is unique to their application; whether it is on a commercial or domestic property.</p>
</header>
<section class="product-list">
<ul class="products">

    But now let’s review that. Are not the basic content of these URL’s the same? Why do you want two different URL’s to have the same content?

    Thread Starter Mousie

    (@melinayung)

    Yes this is the problem originally /product-category/dry-mix-renders/ works fine and looks good, but unfortunately the client wants the product images on the second line to be centred rather than in the standard grid view that the images display in. But only on this page, because on the pages that have even amount of images this is not a problem. It’s just the pages with uneven number of images the “uneven” line of images has to be centred. The only way I could see to get around this was to make the images static, put them in a table and centre them manually ??

    The other page i’ll have to do the same as this is this one https://www.jpscoatings.com.au/product-category/polymer-render/

    Thread Starter Mousie

    (@melinayung)

    Hi Pioneer Valley, just wondering if you had any further help there?

    Thread Starter Mousie

    (@melinayung)

    Was able to get help elsewhere. Closing topic

    Thread Starter Mousie

    (@melinayung)

    Moderator, any chance of deleting this post?

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Change page background image’ is closed to new replies.