-2
I’m trying to put a second background on my site using the main tag, but I wanted the background to stay next to the text on the sides
(without this empty space of margin
, in the case of this space in pink in the image below)
click on the image to view it in its original size
h1 {
width: 50%;
margin-left: 350px;
font-size: 28;
}
body {
font-size: 18;
margin-top: 30px;
font-family: 'Open Sans';
line-height: 1.5;
background: url(fundo.jpg) center;
color: white;
}
p {
margin-left: 250px;
margin-right: 250px;
}
h3 {
margin-left: 600px;
}
main {
background: blue;
}
<!DOCTYPE>
<html lang='pt'>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<title> All the Boeings AvianAir </title>
<link rel="stylesheet" type="text/css" href="boeing.css">
</head>
<body>
<h1>
All the Boeings and how to differentiate each one
</h1>
<h3>
Boeing 707
<img src="">
</h3>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id justo risus. Cras aliquam arcu non mi elementum, tristique aliquam lectus volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec non
venenatis ex. Morbi pulvinar sit amet eros quis pharetra. Curabitur dictum faucibus lacus. Pellentesque lacus dui, tempus sit amet iaculis sed, rhoncus et quam. Suspendisse id neque eleifend, molestie neque in, laoreet lorem. Nunc eu lorem sit amet
neque cursus finibus eget sit amet arcu. Maecenas at quam laoreet, convallis lorem blandit, efficitur enim.
</p>
</main>
</body>
</html>
I withdrew as the other answer also speaks, but then I can’t leave the text in the middle of the screen as it was... could I leave the text like that and still make the background look like I want? https://imgur.com/a/GLFs26J (example of how it turned out)
– Math
Yes! You would have to write inside the main selector block:
display: block; /* o margin auto só funciona se o modo do display for block */ width: 400px; /*a largura que você deseja que texto ocupe*/ margin: auto; /* Para deixar no centro */
– Heitor Heitor Heitor