Adjust Card Location

Asked

Viewed 160 times

-2

Good morning, I’m creating a responsive web page and I’d like the top of the card to always be right in the middle of the image I put in the background, regardless of the screen size. I have no idea how to do this. Please help me.

* {
    margin: 0;
    padding:0;
}

html, body {
	overflow: hidden;
    width: 100%;
    height: 100%;
}

.fundo1{
	display: table;
  	width: 100%;
  	height: 35%;
  	padding: 100px 0;
  	color: white;
 	background: url('https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80') no-repeat bottom center scroll;
  	background-position: 30% 45%;
  	background-size: cover;
  	filter: blur(6px);
  	position: absolute;
}

.meucard{
	margin-top: 15%;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Pagina web</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
	<div class="fundo1">
		
	</div>
	<div class="container meucard">
		<div class="card text-center">
			<div class="card-body">
				<h5 class="card-title">Principal</h5>
				<p class="card-text">Contato</p>
				<a href="#" class="btn btn-primary">Teste</a>
			</div>
		</div>
	</div>
</body>
</html>

html css css3 twitter-bootstrap

2 answers

0

You can use position or flex display, but the ideal I think would be to put the card inside the div back1, but if you don’t want to apply on the body or put a wrapper on the two the important thing is in your case it can look like this: position

body {
    position: relative;
} 

.meucard {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

using flexbox

.body {
    display: ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}

0

Hello,

You can use flexbox, but first you need to make some changes to your code.

       * {
            margin: 0;
            padding:0;
        }

        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

        .fundo1{
            display: table;
            width: 100%;
            height: 100vh;
            padding: 100px 0;
            background: url('https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80') no-repeat bottom center scroll;
            background-position: 30% 45%;
            background-size: cover;
            position: relative;
        }


        .fundo1::after {
            content: '';
            filter: blur(6px);
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            z-index: 100;
        }

        .meucard {
            min-height:100%;
            display: flex;
            align-items:center;
            justify-content: center;
        }

        .card {
            z-index: 1000000;
            width: 100%;
        }

I used the pseudo-element ::after to generate the Blur effect without overwriting other elements from within and z-index to leave him behind the other elements.


    <div class="fundo1">

        <div class="container meucard">
            <div class="card col-12 text-center">
                <div class="card-body">
                    <h5 class="card-title">Principal</h5>
                    <p class="card-text">Contato</p>
                    <a href="#" class="btn btn-primary">Teste</a>
                </div>
            </div>

        </div>

    </div>

In HTML, I put it all together in a single , which would be correct. Since you are using Bootstrap, an interesting thing is to try to use its grids system correctly, which would make it easier for you to make this kind of change, after all the framework is there to help you :).

An example of how to use Bootstrap correctly:


<div class='container'>
     <div class='row'>
          <div class='col-3'>
               <h1>Conteúdo da minha primeira coluna.</h1>
          </div>

          <div class='col-3'>
               <h1>Conteúdo da minha segunda coluna.</h1>
          </div>

          <div class='col-6'>
               <h1>Conteúdo da minha terceira coluna.</h1>     
          </div>
     </div>
</div>

Read the Bootstrap documentation (also in Portuguese), which will help you a lot.

I hope I helped, hugging!

Browser other questions tagged html css css3 twitter-bootstrap

You are not signed in. Login or sign up in order to post.