How to have two background-images with CSS?

Question

I am trying to figure out how to get to display two background-images in css so that the first background is a gradient image generated with css and then over that gradient to have some-image.png.

I tried adding someimage.png in another div above the div with gradient effect but I didn't find a way to add height to that div without messing up the page.

The idea is to have a gradient background and over that on the bottom of the page, an image that will have full page width, so I can not place it in the container div. I don't know if this is even possible :)

Any help would be highly appreciated!

This is the CSS code:

body {
margin: 10px 40px;
background: #fff;
background-image: linear-gradient(to bottom right, #A33030 0%, rgba(182, 69, 69, 0.88) 100%);
background-repeat: no-repeat;
background-attachment: fixed;
font-family: "Open Sans";
font-size: 17px;
color: #FFFFFF;
background-size: cover;
}
.overlay-image{
height:100%;
background-image: some-image.png
}

The HTML code:

<body>
<div class="overlay-image"></div>
<div class="container">
<header><a class="logo"><img src="logo.png"></a><nav><a href="#">Blog</a><a href="#">About</a><a href="#">Courses</a><a href="#">Contact</a></nav></header>
<div class="content"><h1>Headline</h1>
<div class="box-test">
<img src="face.jpg">
<p>Some text</p>
</div>
</div>
<div class="footer">Copyrigth</div>
</div>
</body>

well, I just googled `css multiple backgrounds` and the [first result](https://developer.mozilla.org/en/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds) is exactly what you want. why didn't you google it? wouldn't it save you time to google such trivial question instead of writing a question about it? — vsync, Feb 08 '16 at 22:30

score 1 · Answer 1 · answered Feb 08 '16 at 22:32

1

From: http://www.w3schools.com/css/css3_backgrounds.asp

 #example1 {
     background-image: url(img_flwr.gif), url(paper.gif);
     background-position: right bottom, left top;
     background-repeat: no-repeat, repeat;
 }

answered Feb 08 '16 at 22:32

user5697101

571
4
12

score 0 · Accepted Answer · answered Feb 08 '16 at 22:33

Well, you could say something like:

.double {
  background-image: url('first_image.png') url('second_image.png');
}

From there on, when using properties such as background-position or background-size, you'll need to have two comma-separated values to apply to the individual images.

How to have two background-images with CSS?

2 Answers2

Linked