This topic contains 19 replies, has 3 voices, and was last updated by  Skandha 9 months, 4 weeks ago.

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #131909

    PeteGWebmaster
    Participant

    Hi, I’d like the different sections of the home page of gaterepairca dot com to have different background images.

    The different sections I’m referring to in particular are: header section, footer-widget area, promotion headline section, featured content section & content (body/wrapping/bottom footer below the widget)

    Which codes would I put into the CSS for this so I could just paste the URL’s of the images in?

    Thank you

    #131942

    Skandha
    Participant

    @petegwebmaster: Go to => Appearance => Customize => Additional CSS and add the following CSS Code

    /*For header section*/
    #masthead {
        background: url(" ");
    }
    
    /*For promotion headline section*/ 
    #promotion-message {
        background: url(" ");
    }
    
    /*For featured content section*/
    #featured-content {
        background: url(" ");
    }
    
    /*For content section*/
    #content {
        background: url(" ");
    }
    
    /*For footer widget area*/
    #colophon #supplementary {
        background: url(" ");
    }

    Add the image url in between the double quotes.
    Let me know if this solves your issue!

    Regards,
    Skandha

    #131943

    tikaram
    Participant

    @petegwebmaster : Add the following additional css for header section.

    #masthead {
        background-image: url("http://gaterepairca.com/wp-content/uploads/senior-citizens.jpg");
    }

    for footer

    .site-footer #supplementary {
    	background-image: url("http://gaterepairca.com/wp-content/uploads/senior-citizens.jpg");
    }

    promotional section

    #promotion-message {
    	background-image: url("http://gaterepairca.com/wp-content/uploads/senior-citizens.jpg");
    }

    featured content

    #featured-content {
    	background-image: url("http://gaterepairca.com/wp-content/uploads/senior-citizens.jpg");
    }

    Change the background-image url with the desired images.

    Regards,
    Tikaram

    #132080

    PeteGWebmaster
    Participant

    Ok I have two follow up questions:

    1. Do these codes work for both mobile, tablet and PC? If not can you please adjust them so they do?

    2. I would like different pages to have different background images. For example I’d like to have a gate images in the background of the gate pages. Garage door image in the background of the garage door page. Etc. Which codes would I use to change these? I assume I’d probably be referencing the pages’ post ID #s, correct?

    Thanks

    #132089

    Skandha
    Participant

    @petegwebmaster: Yes, these codes work for all mobile, tablet and PC. If you have any problem regarding this let me know.

    You can have different background images for different pages. Yes you will need to reference page ids and post ids. If you have any problem doing it you can tell me the page where you want to have the background images, i will provide you with the necessary CSS Codes.

    Let me know if you have anymore issues!

    Regards,
    Skandha

    #132108

    PeteGWebmaster
    Participant

    What if I wanted to make xyz.jpg the background image for post id #1? How might I code that into the Custom CSS section?

    Thanks

    #132113

    Skandha
    Participant

    @petegwebmaster: If you have a post with id #post-1 and want to make xyz.jpg as the background image for the post you can add the following Custom CSS.

    #post-1 {
        background: url("xyz.jpg");
    }

    Let me know if you have any other issues!

    Regards,
    Skandha

    #132114

    PeteGWebmaster
    Participant

    Ok so I tried that with these codes and it didn’t work

    #post-21 {
        background: url("http://gaterepairca.com/wp-content/uploads/gate.jpg");
    	}
    #132115

    PeteGWebmaster
    Participant

    It says “There is 1 error which must be fixed before you can save.
    Update anyway, even though it might break your site?”

    #132116

    PeteGWebmaster
    Participant

    i would like the gate image to be the background for the entirety of the page (not just the content area). I’d like the gate image to replace the garage door background image essentially. Please let me know how to adjust css code for that. Thanks

    #132120

    Skandha
    Participant

    @petegwebmaster: It looks like the post id you entered may be incorrect. Can you tell me on which post you want to insert a background image.

    To insert background on the entire page. Go to => Appearance => Customize => Additional CSS and add the following CSS Code

    #page {
       background: url("http://gaterepairca.com/wp-content/uploads/gate-1.jpg");
    }

    Let if know if this solves your issue!

    Regards,
    Skandha

    #132121

    PeteGWebmaster
    Participant

    Post 21 please

    #132122

    Skandha
    Participant

    @petegwebmaster: #post-21 is the Automatic Gates post inside Automatic Gates page. The previous code you used should work perfectly. Please check inside the Automatic Gates page.

    Let me if you have anymore issues!

    Regards,
    Skandha

    #132123

    Skandha
    Participant

    @petegwebmaster: #post-21 is the Automatic Gates post inside Automatic Gates. The previous code you used should work perfectly. Please inside the Automatic Gates page.

    Let me know if you have anymore issues!

    Regards,
    Skandha

    #132124

    PeteGWebmaster
    Participant

    No that’s not what I wanted, I wanted the gate background image to replace the garage door image for the entirety of the page. I don’t want a background in the content area because that looks bad. I want my site to look good. Can’t have the same background image on all the pages. Please understand. Thanks

    #132125

    PeteGWebmaster
    Participant

    I specifically need different background images on different pages, not the same garage door picture on the gate & keyless entry system pages as that doesn’t make any sense at all.

    #132128

    Skandha
    Participant

    @petegwebmaster: I’m sorry i was not able to understand you. Please check if the following code is what you want.
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code

    body.page-id-32.custom-background {
    	background:url("http://gaterepairca.com/wp-content/uploads/gate.jpg");
    	background-position:left top;
    	background-size:cover;
    	background-repeat:repeat;
    	background-attachment:fixed;
    }
    
    #content {
    	background: black !important;
    }

    Let me know if you need more changes to be made!
    Regards,
    Skandha

    #132154

    PeteGWebmaster
    Participant

    Great it works thanks!

    #132160

    PeteGWebmaster
    Participant

    For some reason this code is not working:

    /*For content section*/
    #content {
        background: url("http://gaterepairca.com/wp-content/uploads/gate-garage-door.jpg");
    }

    I would like this jpg tp be the background image for the content including the sidebar. I was able to almost get it to work by using #main but was wondering if you know another way to make it the background for the content section as intended? Thank you

    #132196

    Skandha
    Participant

    @petegwebmaster: Please remove the css you used using #main {background:url("");}
    Go to => Appearance => Customize => Additional CSS and add the following CSS.

    #content {
        background: url("http://gaterepairca.com/wp-content/uploads/gate-garage-door.jpg");
        background-position:left top;
        background-size:cover;
        background-repeat:repeat;
        background-attachment:fixed;
    }

    Let me know if this solves your issue!

    Regards,
    Skandha

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘Home page background images’ is closed to new replies.