So this is my code, I am trying to adjust the width of
.feature2::before { content: url(./media/image-computer.png/500/100);
}
as you can see, I have tried to adjust the widht with 500/100 inside the container, but now my image is gone, I have also tried to adjust the width by using width and height property normally but it's not working please help.
this is how it looks like 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;
background-size: contain;
width: 23.438rem;
height: 325.313rem;
border: 1px red solid;
margin: 0 auto;
padding: 9.375rem 2rem;
}
.main_logo {
opacity: 70%;
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/500/100);
}<!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：
What you might consider doing is instead of adding the image url to content, use background-image instead. You can set your width and height to however you want it to be. Setting background-size: cover; will insure the whole space is utilized.
.feature2::before {
content: "";
display: block;
width: 100%;
height: 200px;
background-size: cover;
background-image: url(https://imagecdn.app/v1/images/https://images.unsplash.com/photo-1525923838299-2312b60f6d69?width=300&height=200);
}
@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;
background-size: contain;
width: 23.438rem;
height: 325.313rem;
border: 1px red solid;
margin: 0 auto;
padding: 9.375rem 2rem;
}
.main_logo {
opacity: 70%;
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 {
margin: 3rem 0;
}
.feature2::before {
content: "";
display: block;
width: 250px;
height: 160px;
background-size: cover;
background-image: url(https://imagecdn.app/v1/images/https://images.unsplash.com/photo-1525923838299-2312b60f6d69?width=300&height=200);
max-width: 100%;
margin: 0 auto;
}<!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>