How to put CSS card over background image
Question
I'm struggling with this CSS card, I want it over the background image, but I don't know how, I already tried positioning I accidentally placed the background image in the header, but I changed it to a div but it still doesn't work Can someone help?
* { margin: 0; padding: 0; font-family: 'Century Gothic'; } img { width: 100%; }.header { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/foto_beginpagina.jpg); height: 100vh; background-size: cover; background-position: center; } ul { float: right; list-style-type: none; margin-top: 25px; } ul li { display: inline-block; } ul li a { text-decoration: none; color: white; padding: 5px 20px; border: 1px solid white; transition: 0.6s ease; } ul li.huidig a { background-color: white; color: black; } ul li a:hover { background-color: white; color: black; }.head { margin-right: 25px; }.titel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }.titel h1 { color: white; font-size: 70px; } div.ondertitel h3 { color: white; padding-top: 20px; max-width: 600px; left: 50%; }.card { position: absolute; margin: 30px; padding: 10px; background: rgb(139, 119, 167); background: radial-gradient(circle, rgba(139, 119, 167, 1) 0%, rgba(139, 122, 140, 1) 100%); min-width: 400px; max-width: 400px; border: 2px solid black; }.card-title { padding: 30px; }.card-image img { border-radius: 20%; }
<html> <body> <div class="header"> <div class="head"> <ul> <li><a href="index.html">Home</a></li> <li><a href="geschiedenis.html">Geschiedenis</a></li> <li class="huidig"><a href="rand.html">Randapparatuur</a></li> <li><a href="opbouw.html">Opbouw van de computer</a></li> </ul> </div> </div> <div class="card"> <div class="card-image"> <img src="images/randapparatuur.jpg" alt="Randapparatuur"> </div> <h1 class="card-title">Randapparatuur</h1> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam. Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </div> </body> </html>
ignore: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam. Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
2 answers
solution1
1 ACCPTED 2020-12-21 13:15:00
Class .card having position: absolute which cause the issue.
Added .main-content div with background image cover.
Example : https://codepen.io/cursorrux/pen/LYRjQqG
May be this helps you:
* { margin: 0; padding: 0; font-family: 'Century Gothic'; } img { width: 100%; }.header { background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('images/foto_beginpagina.jpg'); height: 50vh; background-size: cover; background-position: center; } ul { float: right; list-style-type: none; margin-top: 25px; } ul li { display: inline-flex; } ul li a { text-decoration: none; color: white; padding: 5px 20px; border: 1px solid white; transition: 0.6s ease; } ul li.huidig a { background-color: white; color: black; } ul li a:hover { background-color: white; color: black; }.head { margin-right: 25px; }.titel{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }.titel h1{ color: white; font-size: 70px; } div.ondertitel h3{ color: white; padding-top: 20px; max-width: 600px; left: 50%; } /* div having background image */.main-content { background-image: url('https://murraysinteriors.com.au/wp-content/uploads/2018/09/dummy-banner.jpg'); padding: 5px; background-size: cover; }.card{ margin: 30px; padding: 10px; background: rgb(139,119,167); background: radial-gradient(circle, rgba(139,119,167,1) 0%, rgba(139,122,140,1) 100%); min-width: 400px; max-width: 400px; border: 2px solid black; }.card-title { padding: 30px; }.card-image img { border-radius: 20%; }
<div class="header"> <div class="head"> <ul> <li><a href="index.html">Home</a></li> <li><a href="geschiedenis.html">Geschiedenis</a></li> <li class="huidig"><a href="rand.html">Randapparatuur</a></li> <li><a href="opbouw.html">Opbouw van de computer</a></li> </ul> </div> </div> <div class="main-content"> <div class="card"> <div class="card-image"> <img src="https://pixselo.com/wp-content/uploads/2018/03/dummy-placeholder-image-400x400.jpg" alt="Randapparatuur"> </div> <h1 class="card-title">Randapparatuur</h1> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam. Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </div> </div>
solution2
-1 2020-12-21 13:00:51
url(images/foto_beginpagina.jpg); This is wrong
url("images/foto_beginpagina.jpg"); This is correct
because url takes path with single quote('...') or double quote("...")
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.