Two backgrounds for one forum

[bai]

Hello all! I was not exactly sure where to put this request, so I stuck it here!

I'm asking for some code that will allow me to have two background images. It's almost imperative considering the theme layout I'm using and it would be a huge help if someone could help me figure this out 

[Brian]

Hi, bai.

If you're looking to have two background images show at the same time you'll need to specify two comma-separated background image URLs in their CSS. You'll also need to do this for any background properties you don't want them to share. For example, placing one on the top left of the page and another on the top right will require you to specify comma-separated background position values in the same order you specified the background images.

In the example below two background images are specified in the background-image property. Neither of them need to repeat so only one value is specified for the background-repeat property so that it applies to both of them. Since we want both positioned differently the background-position property has two values specified. These values affect the images in the order you've specified them, so top left applies to the first image and top right affects the second one.

body {
    background-image: url(IMAGE URL 1), url(IMAGE URL 2);
    background-repeat: no-repeat;
    background-position: top left, top right;
}

[bai]

May 8, 2018 12:29:40 GMT -8 Brian said:

Hi, bai .

If you're looking to have two background images show at the same time you'll need to specify two comma-separated background image URLs in their CSS. You'll also need to do this for any background properties you don't want them to share. For example, placing one on the top left of the page and another on the top right will require you to specify comma-separated background position values in the same order you specified the background images.

In the example below two background images are specified in the background-image property. Neither of them need to repeat so only one value is specified for the background-repeat property so that it applies to both of them. Since we want both positioned differently the background-position property has two values specified. These values affect the images in the order you've specified them, so top left applies to the first image and top right affects the second one.

body {
    background-image: url(IMAGE URL 1), url(IMAGE URL 2);
    background-repeat: no-repeat;
    background-position: top left, top right;
}

the second image isn't displaying. i want one of the images to repeat and the other to be just the single version.

[Brian]

Can you link to a page showing the CSS in action?

Short of changing the properties I can't think of any reason the CSS I provided wouldn't work.

[bai]

May 8, 2018 15:09:33 GMT -8 Brian said:

Can you link to a page showing the CSS in action?

Short of changing the properties I can't think of any reason the CSS I provided wouldn't work.

I'd be happy to!

kordeination.boards.net

Here's is the CSS I'm using as well, with the stuff I added in

body {
   background-image: url(http://storage.proboards.com/6939141/images/twSibazOWieCIXfLVRRD.png), url(http://storage.proboards.com/6939141/images/OjT0cieAod0ehfJZYNmb.png);
   background-repeat: repeat, no-repeat;
   background-position: top right, top left;
}

[Brian]

I guess one thing I forgot to mention is that the backgrounds will be stacked in the order that you specify them. The first image you specify goes on top, the next one goes beneath it, and so on.

If you were to switch the values of each of the properties around the second image should show how you want it to.

[bai]

May 8, 2018 15:22:01 GMT -8 Brian said:

I guess one thing I forgot to mention is that the backgrounds will be stacked in the order that you specify them. The first image you specify goes on top, the next one goes beneath it, and so on.

If you were to switch the values of each of the properties around the second image should show how you want it to.

I can't say thank you enough!