i am trying to comlete frontenmentor io challenges.I am as beginner in html and css i applied border radius as 10px to the image to round the edges of image. but it is not reflecting. also i added outfit as font family.but it is also not reflecting.i have given the html/css code here.Kindly help me to fix this
#import url('https://fonts.googleapis.com/css2?family=Outfit:wght#400;700&display=swap');
*body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: hsl(212, 45%, 89%);
}
.main{
width: 300px;
height: 500px;
background-color: hsl(0, 0%, 100%);
align-items: center;
align-content: center;
text-align: center;
border-radius: 10px;
}
.main .img{
width: 250px;
height: 250px;
padding: 1rem;
}
.container{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main h1{
font-family: "outfit" sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<title>Frontend Mentor | QR code component</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container"><div class="main">
<img class= "img" src="/images/image-qr-code.png">
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>
</div>
</div>
</body>
</html>
The border-radius needs to be applied to the .img. However, you won't see it given there is also a padding of a greater amount (1rem). This snippet removed that so you get to see the border-radius.
To increase the generality, as you have given a fixed width and height to the img, I have included an object-fit: contain to ensure all the image is always seen whatever its aspect ratio (you could alternatively use cover to ensure that full size is covered, though it could mean there is some cropping of the image).
#import url('https://fonts.googleapis.com/css2?family=Outfit:wght#400;700&display=swap');
*,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: hsl(212, 45%, 89%);
}
.main {
width: 300px;
height: 500px;
background-color: hsl(0, 0%, 100%);
align-items: center;
align-content: center;
text-align: center;
border-radius: 10px;
}
.main .img {
width: 250px;
height: 250px;
object-fit: contain;
border-radius: 10px;
}
.container {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main h1 {
font-family: "outfit" sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<title>Frontend Mentor | QR code component</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="main">
<img class="img" src="https://picsum.photos/id/1015/300/300">
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>
</div>
</div>
</body>
</html>
Note, there was also a *body at the start of the CSS. I have just guessed that you meant to remove default margin etc from all elements.
add overflow: hidden css in .main class.
The problem is you have added radius to the parent of the image. When content overflow out of radius, they are visible by default.
So to hide the content you need to put overflow hidden.
Try this, I have added border and set border-radius: inherit (this will simply set the border of child as per parent element's property) to img class.
#import url('https://fonts.googleapis.com/css2?family=Outfit:wght#400;700&display=swap');
*body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: hsl(212, 45%, 89%);
}
.main {
max-width: 250px;
width: fit-content;
height: fit-content;
background-color: hsl(0, 0%, 100%);
align-items: center;
align-content: center;
padding: 1em;
border-radius: 10px;
overflow: hidden;
text-justify: none;
text-align: center;
box-sizing: content-box;
}
.main .img {
width: 100%;
height: 250px;
border: 1px solid black;
border-radius: inherit;
}
.main p {
text-justify: inter-word;
text-align: justify;
}
.container {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main h1 {
font-family: "outfit" sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<title>Frontend Mentor | QR code component</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="main">
<img class="img" src="/images/image-qr-code.png" />
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>
</div>
</div>
</body>
</html>
You need to add the border to the image not the parent div your code should be something like this
.main img{ border-radius: 10px; }
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed last month.
This might be a stupid question, but I'm new. I think the problem is in the 'position' property. Already tried everything, the search box jumps from side to side. Maybe a bug in html
.header{
position: relative;
min-height: 900px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
.header::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, #000000 1.38%, rgba(105, 0, 70, 0.38) 20.04%, #000000 100.0%);
}
/* .header_content{
position: relative;
} */
.search{
position:relative;
margin: 0 auto;
}
.search_bar{
font-family: 'Poppins';
font-weight: 700;
font-size: 17px;
color: antiquewhite;
line-height: 120%;
padding: 15px 20px;
border: 2px solid white;
background-color:rgba(58, 58, 58, 0.38);
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tall Lorenc</title>
<script src="https://code.iconify.design/3/3.0.1/iconify.min.js"></script>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header id="welcome" class="header" style="background-image: url('/img/header1.jpg');">
<div class="container">
</div>
<div class="row">
<div class="col-lg8 offset-lg-2">
<div class="header_content">
<div style="width: 700px;">
<div class="search">
<input type="text" class="search_bar" placeholder="Which type of track are you looking for?">
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
Try this
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tall Lorenc</title>
<script src="https://code.iconify.design/3/3.0.1/iconify.min.js"></script>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header id="welcome" class="header" style="background-image: url('/img/header1.jpg');">
<div class="container">
</div>
<div class="row">
<div class="col-lg8 offset-lg-2">
<div class="header_content">
<div class="search-wrapper">
<div class="search">
<input type="text" class="search_bar" placeholder="Which type of track are you looking for?">
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
CSS
.header{
position: relative;
min-height: 900px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
.header::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, #000000 1.38%, rgba(105, 0, 70, 0.38) 20.04%, #000000 100.0%);
}
/* .header_content{
position: relative;
} */
.search{
position: relative;
margin: auto;
width:700px;
}
.search-wrapper{
width:100%
}
.search_bar{
font-family: 'Poppins';
font-weight: 700;
font-size: 17px;
color: antiquewhite;
line-height: 120%;
padding: 15px 20px;
border: 2px solid white;
background-color:rgba(58, 58, 58, 0.38);
width: 100%;
}
a better way of doing this is using flex
html, body{
margin:0;
padding:0;
}
.container{
display:flex;
height:100vh;
background-color:lightgreen;
justify-content:center;
align-items:center;
}
<div class='container'>
<input type='text'>
</div>
I changed my answer, this should work!
I just commented out the div style="width: 700px;" lines
Having div within div can get very complex as the child div will always inherit the styling of the parent div. Check your divs and see if you truly need all of those nested into one another.
I also changed the width of the search bar to 90% instead of 100% so you can see it actually centered.
.header{
position: relative;
min-height: 900px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
.header::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, #000000 1.38%, rgba(105, 0, 70, 0.38) 20.04%, #000000 100.0%);
}
/* .header_content{
position: relative;
} */
.search{
position:relative;
margin: 0 auto;
text-align:center;
}
.search_bar{
font-family: 'Poppins';
font-weight: 700;
font-size: 17px;
color: antiquewhite;
line-height: 120%;
padding: 15px 20px;
border: 2px solid white;
background-color:rgba(58, 58, 58, 0.38);
width: 90%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tall Lorenc</title>
<script src="https://code.iconify.design/3/3.0.1/iconify.min.js"></script>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header id="welcome" class="header" style="background-image: url('/img/header1.jpg');">
<div class="container">
</div>
<div class="row">
<div class="col-lg8 offset-lg-2">
<div class="header_content">
<!-- <div style="width: 700px;"> -->
<div class="search" >
<input type="text" class="search_bar" placeholder="Which type of track are you looking for?">
</div>
<!-- </div> -->
</div>
</div>
</div>
</div>
</header>
</body>
</html>
I think you need to learn more HTML and CSS, so that you can understand what's really going on.
Now, with your current set up, the simplest thing you can do is this:
.header_content {
display: flex;
justify-content: center;
}
I tried this out, and maybe I don't have all of your CSS, but I couldn't figure out why it was pushed slightly to the right. Either way, if this .header_content container correctly fits its parent, then you should be good to go, because the children of .header_content centered correctly.
Since I don't understand your full setup, this may not be helpful to you, but I think you've overcomplicated your HTML. This is all you should need, from my understanding:
/* styles.css */
/* You may consider switching your rgba()'s to the modern syntax. No "a" in rgb, and no commas. Just a "/" to seperate the alpha value. I changed them in my example, as you can see. */
header {
background-image: linear-gradient(180deg, #000000 1.38%, rgb(105 0 70 / 0.38) 20.04%, #000000 100.0%); /* I'm not sure if this was it's intended use, since you had it in a ::before element, but this looked more correct in my testing. */
display: grid; /* You could also do display: flex, but I think this may be more accurate to your needs. */
grid-template-columns: 1fr 2fr 1fr; /* This will make sure your search bar (the second element in the grid), will always take up the majority of the space, while the sides remain even. */
place-items: center; /* This ensures each grid item is placed in the center of it's section. */
}
/* This styling isn't necessary to complete your task */
.container {
display: grid;
place-items: center;
color: white;
font-family: sans-serif;
}
/* This ensures our search container sizes properly. You may also consider the commented out width value instead. */
.search {
width: 100%;
min-width: 325px; /* This ensures the search bar never cuts out the placeholder text. */
/* width: 325px; */
}
.search_bar {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 17px;
color: antiquewhite;
/* line-height: 120%; I don't think this is necessary. */
padding: 15px 20px;
border: 2px solid white;
background-color: rgb(58 58 58 / 0.38);
width: 100%;
}
<!-- index.html -->
<header>
<div class="container">
Content
</div>
<div class="search">
<input type="text" class="search_bar" placeholder="Which type of track are you looking for?">
</div>
</header>
You'll notice in this example, that the search bar is technically a few pixels to the right, since we don't have any content on the right of it. If we were to remove the .container div with the Content text, it would work best with a display: flex; justify-content: center; instead of display: grid;. I'm just not sure what you full use case is.
Now let's say you want to guarantee it's always 100% center, no matter what kind of content you have around it... (I wouldn't recommend this in most cases, but perhaps it will help in your use case) With my HTML, just change the CSS to this:
/* styles.css */
/* This line below I do in every project, because it makes the sizing and positioning as I expect it to be, rather than chosen by the browser which is different depending on the element. */
*,
html,
body {
position: relative;
box-sizing: border-box;
}
header {
background-image: linear-gradient(180deg, #000000 1.38%, rgb(105 0 70 / 0.38) 20.04%, #000000 100.0%);
padding: 1rem;
display: flex;
}
/* This styling isn't necessary to complete your task */
.container {
display: grid;
place-items: center;
color: white;
font-family: sans-serif;
}
.search {
width: 370px;
position: absolute;
left: 50%;
transform: translateX(-50%);
/* If you also want it vertically aligned to the center, uncomment the below lines and remove the above transform */
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.search_bar {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 17px;
color: antiquewhite;
padding: 15px 20px;
border: 2px solid white;
background-color: rgb(58 58 58 / 0.38);
width: 100%;
}
<!-- index.html -->
<header>
<div class="container">
Content
</div>
<div class="search">
<input type="text" class="search_bar" placeholder="Which type of track are you looking for?">
</div>
</header>
Once again, I think that these kinds of things just require more HTML and CSS knowledge. I'm sure you'll grow to understand this stuff in time. I hope this helps.
I need to build a pie-chart like this.
pie-chart needed to be built
I am unable to use JavaScript(JS) for the pie-chart because the Outlook desktop version is not supporting JS.
I made a pie-chart only with HTML and CSS, but Outlook doesn't support some CSS properties like transform, clip...
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email-template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<p>Hello Allex</p>
<p>Here is the summary of you Work Item</p>
<div class="donut-chart-block block">
<div class="donut-chart">
<div id="part1" class="portion-block"><div class="circle"></div></div>
<div id="part2" class="portion-block"><div class="circle"></div></div>
<div id="part3" class="portion-block"><div class="circle"></div></div>
<div id="part4" class="portion-block"><div class="circle"></div></div>
<p class="center">320 total</p>
</div>
<div class="data-container">
<div class="data-row">
<span class="data-progress">Completed</span>
<span class="data-progress-value">10</span>
</div>
</div>
</div>
</div>
</body>
</html>
And
CSS, which I was trying to apply also as inline and internal CSS, because external will not work for certain I think.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
}
.donut-chart-block {
display: flex;
flex-direction: row;
align-self: flex-start;
}
.donut-chart {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto 2rem;
border-radius: 100%
}
p.center {
background: #fff;
position: absolute;
text-align: center;
font-size: 28px;
top:0;left:0;bottom:0;right:0;
width: 130px;
height: 130px;
margin: auto;
border-radius: 50%;
line-height: 35px;
padding: 15% 0 0;
}
.portion-block {
border-radius: 50%;
clip: rect(0px, 200px, 200px, 100px);
height: 100%;
position: absolute;
width: 100%;
}
.circle {
border-radius: 50%;
clip: rect(0px, 100px, 200px, 0px);
height: 100%;
position: absolute;
width: 100%;
font-family: monospace;
font-size: 1.5rem;
}
#part1 {
transform: rotate(0deg);
background-color: #E64C65;
}
#part2 {
transform: rotate(100deg);
background-color: #11A8AB;
}
#part3 {
transform: rotate(150deg);
background-color: #4FC4F6;
}
#part4 {
transform: rotate(261deg);
background-color: yellow;
}
This is how it looks in the browser.
This is in the Outlook desktop version.
I also tried SVG, Canvas, and other things, and they don't work either.
VML (Vector Markup Language) VML is the last thing that I have tried, I am not sure is it even possible to make a pie-chart with VML, but one thing that stopped me from trying is that VML is now working in Outlook desktop, but it's not working in browser (Google Chrome).
On the Backend side, it is the C# .NET framework.
So does someone has an idea of how should it be done? Thank you in advance :)
that's my first post here. I'm working on a project and one thing block me so i'm trying to ask you if is a solution for this.
I have 3 images with display:flex and justify-content:center. (parrent div)
Then i wanna make them on hover to transform(translate) to same position.
Like, when i hover first image to go left: 200px; and top: 200px; (ex) and same for the rest of two without modify the originaly position from display flex.
Is a easy way of doing that?
Thank you!
Also i wanna make them in JS later but first i wanna make this working fine
That's what i wanna do:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 100px;
height: 100px;
}
.container {
background-color: red;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
}
.img-test1:hover {
transition: 3s;
transform: translate(200px, 200px);
}
.img-test2:hover {
transition: 3s;
transform: translate(200px, 200px);
}
.img-test3:hover {
transition: 3s;
transform: translate(200px, 200px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<img class ="img-test1" src="./Asset_1.svg" alt="">
<img class ="img-test2" src="./Asset_2.svg" alt="">
<img class ="img-test3" src="./Asset_3.svg" alt="">
</div>
</body>
</html>
for simplest answer, use CSS variables with a calc() function.
one time all the elements!! easy and fast
I commented on the code if you want...
the first element has a --i var with 0, so it will be 0 position x
the second element has a --i var with 1, so it will be -100 position x
the third element has a --i var with 2, so it will be -200 position x
the amazing part about this, is if you want to add more images, it will be easy for you, because the formula is calculated by CSS (not you)
here the fixed code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* here the trick */
--end-position: calc(-100px * var(--i));
}
img {
width: 100px;
height: 100px;
}
.container {
background-color: red;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
}
/* use the DRY method (Dont Repeat Yourself) */
.container img:hover {
transition: 3s;
/* one time for all, that's easy! and fast*/
transform: translate(var(--end-position), 200px);
}
<div class="container">
<img style="--i: 0;" class="img-test1" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
<img style="--i: 1;" class="img-test2" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
<img style="--i: 2;" class="img-test3" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</div>
To replicate the positioning given in the picture you need to move the first element by 0 in the x direction, the second by -100px, the third by -200px to get them all to translate to under the first one.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 100px;
height: 100px;
}
.container {
background-color: red;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
}
.img-test1:hover {
transition: 3s;
transform: translate(0, 200px);
}
.img-test2:hover {
transition: 3s;
transform: translate(-100px, 200px);
}
.img-test3:hover {
transition: 3s;
transform: translate(-200px, 200px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<img class ="img-test1" src="./Asset_1.svg" alt="">
<img class ="img-test2" src="./Asset_2.svg" alt="">
<img class ="img-test3" src="./Asset_3.svg" alt="">
</div>
</body>
</html>
My goal is to create a website where the bg is auto-adjusted to the center, with my text on the blue area
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Minecraft</title>
<meta charset="UTF-8">
<meta name="author" content="My Name">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="style.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght#1,700&display=swap');
.Gaming {
font-family: 'Lora', serif;
color: red;
}
.border {
background-color: white;
margin: 30px;
padding: 20px;
position: relative;
border: 5px solid;
width: 50%;
height: 50%;
/* background-image: url(https://images.unsplash.com/photo-1530305408560-82d13781b33a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80); */
}
.ave {
width: 25%;
height: 50;
}
.app {
width: 60%;
height: 60%;
}
.minecraftbody {
background-image: url(https://www.startpage.com/av/proxy-image?piurl=https%3A%2F%2Fwallpaper-house.com%2Fdata%2Fout%2F8%2Fwallpaper2you_213216.jpg&sp=1637611406T358bfd9113b26feaf1742f91b1f8cc55007334c10b4ecebee265c9435d20b5f9);
background-repeat: no-repeat;
background-size: auto;
}
.homebg {
background-image: url(https://images.unsplash.com/photo--82d13781b33a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80);
background-size: auto;
}
.mchead {
color: white;
left: 90px;
top: 26px;
position: relative;
width: 200%;
height: 200%;
}
.mcp {
color: black;
border: 5px solid;
position: relative;
left: 500px;
}
</style>
</head>
<body class='minecraftbody'>
<h1 class="mchead">MINECRAFT</h1>
<div class="mcp">
<p>Minecraft is one of my favorite games ever since I was still a child. I made many friends through it and <br> countless memories was and are being made.
<br><br><br><br><br><br><br><br></p>
<p>This is a picture of one of my servers that me and my friends made in Minecraft. <br> We had so much fun making this house and I still come back to this place everytime I feel nostalgic <br> about my past</p>
<img src="Images/Mc_server.png" alt="minecraft server">
</div>
</body>
</html>
You can see that the background is not resized properly in the window. And there seems to be a line that extends to infinity when zoomed out. Any way to fix this?
As far as I understood that is, that you want your bg image to be centered, is that right? If yes, try to give the background image a background-position: center attribute. Let me know, if I got that correct. Cheers
im working with flexbox atm but the solution doesnt necessarily have to be flexbox related.
these r the code snippets:
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
.mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 0 auto;
top: 70px;
width: 1200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tea Cozy | Home</title>
<link rel="stylesheet" href="./resources/css/style.css">
</head>
<body>
<header>
<img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
<nav>
<span>Mission</span>
<span>Featured Tea</span>
<span>Locations</span>
</nav>
</header>
<!-- main-content -->
<div class="mission">
<div class="mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
</body>
</html>
Im putting a background-img to the .mission div. But it doesnt show the whole picture, it only shows a snipped of it. How do i make the div wrap around the FULL picture? this is what it looks like rn:
i know i could just put the dimensions of the picture to match the height and width of the div but im trying to achieve it some other way. pls explain to me what you did and why and feel free to correct errors (im still learning ^^)
Can't see your images since they aren't hosted online, but I think maybe add background-size: cover to your background image
.mission {
background-image: url(../images/img-mission-background.jpg);
background-size:cover;
background-position: center;
...
}
But if the container just isn't big enough, you could try adding the image to the container and set it's visibility: hidden, this way the container keeps the image dimensions, but it will still have the beautiful background-image showing
You have added the picture as background image. So the element "containing" the picture do not know anything about the dimensions of your picture.
You can add the "background-size" attribute to .mission with the value "cover" so the image will cover the complete div. Or use the value "contain" to show the image complete.
.mission {
background-image: url(../images/img-mission-background.jpg);
background-size: contain;
background-position: center;
position: relative;
margin: 0 auto;
top: 70px;
width: 1200px;
}
To make the .mission container bigger, you have to define the width and height of .mission.
Another way could be to add the image as img tag in your .mission and position the content of .mission absolute on top of the image. But maybe this is a little bit wired solution ;)
Not sure if it's possible using a background image, but instead you can use an <img> tag which will cause the .mission div to expand the full size of the image. You'll need to do some absolute positioning tweaks to get the text to stack on top of the img:
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
}
header img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
.mission {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%, -50%);
width: 1200px;
}
.mission-banner {
position: absolute;
z-index: 2;
}
.mission img {
position: absolute;
z-index: 1;
left: 50%;
margin-left: -425px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tea Cozy | Home</title>
<link rel="stylesheet" href="./resources/css/style.css">
</head>
<body>
<header>
<img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
<nav>
<span>Mission</span>
<span>Featured Tea</span>
<span>Locations</span>
</nav>
</header>
<!-- main-content -->
<div class="mission">
<div style="position:relative">
<img src="http://via.placeholder.com/850x350" />
<div class="mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
</div>
</body>
</html>