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
Post a Comment