Home Ask Login Register

Developers Planet

Your answer is one click away!

user2080812 February 2016

How to have two background-images with CSS?

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;
background-image: some-image.png

The HTML code:

<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 class="footer">Copyrigth</div>


user5697101 February 2016

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;

GMchris February 2016

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.

Post Status

Asked in February 2016
Viewed 1,956 times
Voted 7
Answered 2 times


Leave an answer

Quote of the day: live life