html - How to have two background-images with CSS? -


this question has answer here:

i trying figure out how display 2 background-images in css first background gradient image generated css , on gradient have some-image.png.

i tried adding someimage.png in div above div gradient effect didn't find way add height div without messing page.

the idea have gradient background , on over bottom of page, image have full page width, can not place in container div. don't know if possible :)

any highly appreciated!

this 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, like:

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

from there on, when using properties such background-position or background-size, you'll need have 2 comma-separated values apply individual images.


Comments

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -