Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS How do I have multiple background-images?

Malcolm

Administrator
Administrator
Staff Team
Code Plus
Company Plus
Hi Code Forum!

I'm trying to add multiple background images to share a webpage's background while having different positioning, colour, overlay etc. Is it possible to combine these properties and values? if so can you point me in the right direction?
[CODE lang="css" title="First Image"] body {
background-image: url("assets/image1.png")
background-repeat: no-repeat;
background-position: right 0px bottom 500px;
background-size: 30%;
background-blend-mode: overlay;
}[/CODE]
CSS:
body {
    background-image:url("assets/image2.png");   
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 30%;
    //background-blend-mode: overlay;
}

Thank you in advance! :)
 
Solution
Hi Code Forum!

I'm trying to add multiple background images to share a webpage's background while having different positioning, colour, overlay etc. Is it possible to combine these properties and values? if so can you point me in the right direction?
[CODE lang="css" title="First Image"] body {
background-image: url("assets/image1.png")
background-repeat: no-repeat;
background-position: right 0px bottom 500px;
background-size: 30%;
background-blend-mode: overlay;
}[/CODE]
CSS:
body {
    background-image:url("assets/image2.png");  
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 30%;
    //background-blend-mode: overlay;
}

Thank you in advance! :)
I believe...
Hi Code Forum!

I'm trying to add multiple background images to share a webpage's background while having different positioning, colour, overlay etc. Is it possible to combine these properties and values? if so can you point me in the right direction?
[CODE lang="css" title="First Image"] body {
background-image: url("assets/image1.png")
background-repeat: no-repeat;
background-position: right 0px bottom 500px;
background-size: 30%;
background-blend-mode: overlay;
}[/CODE]
CSS:
body {
    background-image:url("assets/image2.png");  
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 30%;
    //background-blend-mode: overlay;
}

Thank you in advance! :)
I believe this is what you are looking for:

background-image: url(img1.png), url(img2.png);

you are able to chain background images, using commas as separators

reference, for your convenience :)
 
Solution
I believe this is what you are looking for:

background-image: url(img1.png), url(img2.png);

you are able to chain background images, using commas as separators

reference, for your convenience :)
As far as having different coloring, and any other different styling:
give each image their own styling the either the class or the id

:)
 
I believe this is what you are looking for:

background-image: url(img1.png), url(img2.png);

you are able to chain background images, using commas as separators

reference, for your convenience :)
Woo! Thanks :)

By the looks of the link you shared, it seems like you can do the same with colours and positioning, for example:
CSS:
    background-image:url("assets/image.png"), url("assets/image1.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left 0px bottom 0px, right 0px bottom 500px;
    background-size: 30%;
    background-blend-mode: normal, overlay;

Using a comma within the other properties values will let you target the image specified in background-image:URL.
CSS:
    background-image:url("example1"), url("example2");
    background-position: example1, example2;
    background-size: 30%; //Will apply it to both
    background-blend-mode: example1, example2;[
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom