Home page background images

This topic has 19 replies, 3 voices, and was last updated 6 years, 9 months ago by Skandha.

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

Author

Posts
February 19, 2018 at 11:06 am #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

February 20, 2018 at 12:27 am #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
February 20, 2018 at 12:27 am #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
February 21, 2018 at 4:48 pm #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

February 21, 2018 at 10:41 pm #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

February 22, 2018 at 1:58 am #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

February 22, 2018 at 3:15 am #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
February 22, 2018 at 3:41 am #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");
	}
```
February 22, 2018 at 3:42 am #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?”

February 22, 2018 at 3:45 am #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

February 22, 2018 at 4:11 am #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
February 22, 2018 at 4:12 am #132121

PeteGWebmaster
Participant

Post 21 please

February 22, 2018 at 4:22 am #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

February 22, 2018 at 4:25 am #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

February 22, 2018 at 4:34 am #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

February 22, 2018 at 4:35 am #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.

February 22, 2018 at 5:45 am #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
February 22, 2018 at 11:23 am #132154

PeteGWebmaster
Participant

Great it works thanks!

February 22, 2018 at 11:55 am #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
February 22, 2018 at 11:17 pm #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
Author

Posts