so as you can see I have used a background image for my Container but it isn't filling up the container fully, I have tried the object-fit property but it isn't working, the image is still sticking on the left side of the container, what should I do.
here is the screenshot for the image (1st problem): https://imgur.com/puw3bDN
now about the second problem, the image inside (.feature2::before) is exceeding the container, I have tried using width but it is not working.
here is the link to screenshot: https://imgur.com/YPTelhD
@import url("https://fonts.googleapis.com/css2?family=Bai Jamjuree:wght@400;600&display=swap");
* {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
body {
height: 100vh;
font-family: "Bai Jamjuree", sans-serif;
display: flex;
font-size: 18px;
}
.primary {
color: #4a4f53;
}
.neutral {
color: #b3b7b8;
}
.container {
background: url(./media/bg-header-mobile.png) no-repeat top;
object-fit: cover;
width: 23.438rem;
height: 325.313rem;
border: 1px red solid;
margin: 0 auto;
padding: 9.375rem 2rem;
}
.main_logo {
opacity: 85%;
width: 8.5rem;
margin-top: 1.59rem;
}
.main_heading {
font-size: 1.9rem;
line-height: 1.35;
margin-top: 3.5rem;
width: 100%;
margin-bottom: 1.8rem;
}
.main_content {
margin-bottom: 3.5rem;
}
.button {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.ios {
background: #26bba5;
color: white;
font-size: 700;
padding: 15px 10px;
border-radius: 50px;
border-bottom: 3px #219f8a solid;
box-shadow: 0 2px 10px #26bba5;
margin-bottom: 1.5rem;
}
.mac {
background: #6174ff;
color: white;
font-size: 700;
padding: 15px 10px;
border-radius: 50px;
border-bottom: 3px #4f62da solid;
box-shadow: 0 2px 5px #6174ff;
}
.feature1 {
margin-top: 12rem;
}
.feature1_dis {
margin-top: 1.8rem;
}
.feature2::before {
content: url(./media/image-computer.png);
border: 1px red solid;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=default-width, initial-scale=1">
<meta charset="UTF-8">
<meta lang="en">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<img src="media/logo.svg" class="main_logo"/>
<h1 class="main_heading primary">
A history of everything you copy
</h1>
<article class="main_content neutral">Clipbord allows you to track and organize everything you copy instantly access your clipboard on all your devices.</article>
<div class="button">
<botton class="ios">
Download for iOS
</botton>
<botton class="mac">
Download for Mac
</botton>
</div>
</header>
<main>
<div></div>
<section class="features">
<h1 class="feature1 primary">Keep track of your snippets</h1>
<article class="feature1_dis neutral">Clipboard instantly stores any items you copy in the cloud, meaning you can access your snippets immediately on all your devices. Our Mac and iOS apps will help you organize everything.</article>
<h1 class="feature2 primary">
Quick Search
</h1>
<article class="feature2_dis neutral">
Easily search your snippets by content, category, web address, application, and more.
</article>
<h1 class="feature3 primary">
iCloud Sync
</h1>
<article class="feature3_dis neutral">
Instantly saves and syncs snippets across all your devices.
</article>
<h1 class="feature4 primary">
Complete History
</h1>
<article class="feature4_dis neutral">
Retrieve any snippets from the first moment you started using the app.
</article>
<h1 class="feature5 primary">
Access Clipboard Anywhere
</h1>
<aritical class="feature5_dis neutral">
Whether you're on the go, or at your computer, you can access all your Clipboard snippets in a few simple clicks.
</aritical>
<h1 class="feature6 primary">
Supercharge your workflow
</h1>
<article class="feature6_dis neutral">
We've got the tools to boost your produtivity.
</article>
<h1 class="feature7 primary">
Create blacklists
</h1>
<article class="feature7_dis neutral">
Ensure sensitive information never makes its way to your clipboard by excluding certain sources.
</article>
<h1 class="feature8 primary">
Plain text snippets
</h1>
<article class="feature8_dis neutral">
Remove unwanted formatting from copied text for a consistent look.
</article>
<h1 class="feature9 primary">
Sneak preview
</h1>
<article class="feature9_dis neutral">
Quick preview of all snippets on your Clipboard for easy access.
</article>
</section>
<div class="companies">
<ul class="comp">
<li class="com">
<a href="google.com">
<img class="white"src="./media/logo-google.png" alt="google.com">
</a>
</li>
<li class="com">
<a href="IBM.com">
<img class="white"src="./media/logo-ibm.png" alt="IBM.com">
</a>
</li>
<li class="com">
<a href="Microsoft.com">
<img class="white"src="./media/logo-microsoft.png" alt="Microsoft.com">
</a>
</li>
<li class="com">
<a href="https://www.hpe.com/us/en/home.html">
<img class="white"src="./media/logo-hp.png" alt="https://www.hpe.com/us/en/home.html">
</a>
</li>
<li class"com">
<a href="https://en.wikipedia.org/wiki/Vector_graphics">
<img class="white" src="./media/logo-vector-graphics.png" alt="vector graphics">
</a>
</li>
</ul>
</div>
<div class="lower_section">
<section class="lower_section">
<h1 class="lower_heading primary">Clipboard for iOS and Mac OS</h1>
<article class="lower_content neutral">
Available for free on the App Store Download for Mac or iOS, sync with iCloud and you're ready to start adding to your clipboard.
</article>
<div class="button">
<botton class="ios">
Download for iOS
</botton>
<botton class="mac">
Download for Mac
</botton>
</div>
</section>
</div>
</main>
<footer>
<div class="foot">
<img src="media/logo.svg"
alt="logo">
<nav class="navigation_bar">
<ul class="nav_list">
<li class="items">FAQs</li>
<li class="items">Contact Us</li>
<li class="items">Privacy Policy</li>
<li class="items">Press Kit</li>
<li class="items">Install Guide </li>
</ul>
</nav>
</div>
<div class="media">
<ul class="media-list">
<li class="media_items primary">
<a href="facebook.com">
<img src="./media/icon-facebook.svg" alt="facebook_icon">
</a>
</li>
<li class="media_items primary">
<a href="twitter.com">
<img src="./media/icon-twitter.svg" alt="twitter-icon">
</a>
</li>
<li class="media_items primary">
<a href="instagram.com">
<img src="./media/icon-instagram.svg" alt="instagram-icon">
</a>
</li>
</ul>
</div>
</footer>
</div>
</body>
</html>CodePudding user response：
in your .container you can use background-size: cover to fill
@import url("https://fonts.googleapis.com/css2?family=Bai Jamjuree:wght@400;600&display=swap");
* {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
body {
height: 100vh;
font-family: "Bai Jamjuree", sans-serif;
display: flex;
font-size: 18px;
}
.primary {
color: #4a4f53;
}
.neutral {
color: #b3b7b8;
}
.container {
background: url(https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cmFuZG9tfGVufDB8fDB8fA==&ixlib=rb-1.2.1&w=1000&q=80) no-repeat top;
object-fit: cover;
width: 23.438rem;
height: 325.313rem;
border: 1px red solid;
margin: 0 auto;
padding: 9.375rem 2rem;
background-size: cover;
}
.main_logo {
opacity: 85%;
width: 8.5rem;
margin-top: 1.59rem;
}
.main_heading {
font-size: 1.9rem;
line-height: 1.35;
margin-top: 3.5rem;
width: 100%;
margin-bottom: 1.8rem;
}
.main_content {
margin-bottom: 3.5rem;
}
.button {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.ios {
background: #26bba5;
color: white;
font-size: 700;
padding: 15px 10px;
border-radius: 50px;
border-bottom: 3px #219f8a solid;
box-shadow: 0 2px 10px #26bba5;
margin-bottom: 1.5rem;
}
.mac {
background: #6174ff;
color: white;
font-size: 700;
padding: 15px 10px;
border-radius: 50px;
border-bottom: 3px #4f62da solid;
box-shadow: 0 2px 5px #6174ff;
}
.feature1 {
margin-top: 12rem;
}
.feature1_dis {
margin-top: 1.8rem;
}
.feature2::before {
content: url(./media/image-computer.png);
border: 1px red solid;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=default-width, initial-scale=1">
<meta charset="UTF-8">
<meta lang="en">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<img src="media/logo.svg" class="main_logo" />
<h1 class="main_heading primary">
A history of everything you copy
</h1>
<article class="main_content neutral">Clipbord allows you to track and organize everything you copy instantly access your clipboard on all your devices.</article>
<div class="button">
<botton class="ios">
Download for iOS
</botton>
<botton class="mac">
Download for Mac
</botton>
</div>
</header>
<main>
<div></div>
<section class="features">
<h1 class="feature1 primary">Keep track of your snippets</h1>
<article class="feature1_dis neutral">Clipboard instantly stores any items you copy in the cloud, meaning you can access your snippets immediately on all your devices. Our Mac and iOS apps will help you organize everything.</article>
<h1 class="feature2 primary">
Quick Search
</h1>
<article class="feature2_dis neutral">
Easily search your snippets by content, category, web address, application, and more.
</article>
<h1 class="feature3 primary">
iCloud Sync
</h1>
<article class="feature3_dis neutral">
Instantly saves and syncs snippets across all your devices.
</article>
<h1 class="feature4 primary">
Complete History
</h1>
<article class="feature4_dis neutral">
Retrieve any snippets from the first moment you started using the app.
</article>
<h1 class="feature5 primary">
Access Clipboard Anywhere
</h1>
<aritical class="feature5_dis neutral">
Whether you're on the go, or at your computer, you can access all your Clipboard snippets in a few simple clicks.
</aritical>
<h1 class="feature6 primary">
Supercharge your workflow
</h1>
<article class="feature6_dis neutral">
We've got the tools to boost your produtivity.
</article>
<h1 class="feature7 primary">
Create blacklists
</h1>
<article class="feature7_dis neutral">
Ensure sensitive information never makes its way to your clipboard by excluding certain sources.
</article>
<h1 class="feature8 primary">
Plain text snippets
</h1>
<article class="feature8_dis neutral">
Remove unwanted formatting from copied text for a consistent look.
</article>
<h1 class="feature9 primary">
Sneak preview
</h1>
<article class="feature9_dis neutral">
Quick preview of all snippets on your Clipboard for easy access.
</article>
</section>
<div class="companies">
<ul class="comp">
<li class="com">
<a href="google.com">
<img class="white" src="./media/logo-google.png" alt="google.com">
</a>
</li>
<li class="com">
<a href="IBM.com">
<img class="white" src="./media/logo-ibm.png" alt="IBM.com">
</a>
</li>
<li class="com">
<a href="Microsoft.com">
<img class="white" src="./media/logo-microsoft.png" alt="Microsoft.com">
</a>
</li>
<li class="com">
<a href="https://www.hpe.com/us/en/home.html">
<img class="white" src="./media/logo-hp.png" alt="https://www.hpe.com/us/en/home.html">
</a>
</li>
<li class "com">
<a href="https://en.wikipedia.org/wiki/Vector_graphics">
<img class="white" src="./media/logo-vector-graphics.png" alt="vector graphics">
</a>
</li>
</ul>
</div>
<div class="lower_section">
<section class="lower_section">
<h1 class="lower_heading primary">Clipboard for iOS and Mac OS</h1>
<article class="lower_content neutral">
Available for free on the App Store Download for Mac or iOS, sync with iCloud and you're ready to start adding to your clipboard.
</article>
<div class="button">
<botton class="ios">
Download for iOS
</botton>
<botton class="mac">
Download for Mac
</botton>
</div>
</section>
</div>
</main>
<footer>
<div class="foot">
<img src="media/logo.svg" alt="logo">
<nav class="navigation_bar">
<ul class="nav_list">
<li class="items">FAQs</li>
<li class="items">Contact Us</li>
<li class="items">Privacy Policy</li>
<li class="items">Press Kit</li>
<li class="items">Install Guide </li>
</ul>
</nav>
</div>
<div class="media">
<ul class="media-list">
<li class="media_items primary">
<a href="facebook.com">
<img src="./media/icon-facebook.svg" alt="facebook_icon">
</a>
</li>
<li class="media_items primary">
<a href="twitter.com">
<img src="./media/icon-twitter.svg" alt="twitter-icon">
</a>
</li>
<li class="media_items primary">
<a href="instagram.com">
<img src="./media/icon-instagram.svg" alt="instagram-icon">
</a>
</li>
</ul>
</div>
</footer>
</div>
</body>
</html>CodePudding user response：
background-size:cover; background-repeat:no-repeat;