[PeteGWebmaster]

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

[Skandha]

@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

[tikaram]

@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

[PeteGWebmaster]

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

[Skandha]

@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

[PeteGWebmaster]

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

[Skandha]

@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

[PeteGWebmaster]

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");
	}

[PeteGWebmaster]

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

[PeteGWebmaster]

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

[Skandha]

@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

[PeteGWebmaster]

Post 21 please

[Skandha]

@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

[Skandha]

@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

[PeteGWebmaster]

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

[PeteGWebmaster]

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.

[Skandha]

@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

[PeteGWebmaster]

Great it works thanks!

[PeteGWebmaster]

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

[Skandha]

@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

[Author]

Posts