I'm wanting to essentially take an image and crop a section of it with CSS.
Here's the picture I'd like to use.
Here's how I'd like to crop it
So, here's the code that I'm using right now.
body {
font-family: "Montserrat", sans-serif;
}
.staffboxes {
background: white;
width: 15%;
text-transform: uppercase;
border: #dedede solid 1px;
}
.staffpfp {
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="staffdesign.css">
<meta charset="UTF-8" />
</head>
<body>
<h3>Staff Page</h3>
<div class="staffboxes">
<p>
<div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>
</body>
</html>
Here's what comes out
If you could please help me, I'd appreciate it!
All you have to do is set your image to width: 100% and height to auto to prevent distortion.
This way, if you change the overall size of .staffpfp class in the future, the img inside will adapt accordingly.
body {
font-family: "Montserrat", sans-serif;
}
.staffboxes {
background: white;
width: 15%;
text-transform: uppercase;
border: #dedede solid 1px;
}
.staffpfp {
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
.staffpfp img{width: 100%; height: auto;}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="staffdesign.css">
<meta charset="UTF-8" />
</head>
<body>
<h3>Staff Page</h3>
<div class="staffboxes">
<p>
<div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>
</body>
</html>
Related
I'm trying to make the center blue div expand until it touches an edge of a screen. I would like it to expand the font size of all subtexts and the size of the discord iframe embed so that it is relatively the same size on any device. I'm not sure if this is even possible without javascript.
you can see the site at https://duelcraft.games/
h1 {
text-align: center;
font-size: 64px;
}
p {
text-align: center;
}
h2 {
text-align: center;
}
iframe {
display: block;
border-style: none;
}
html {
height: 100%;
}
body {
font: normal 16px verdana, arial, sans-serif;
background-position: top;
height: 100%;
}
.test {
width: 500px;
border: 2px solid black;
padding: 50px;
margin: auto;
background-color: #9FE7FF;
}
.email-part {
font-weight: bold;
}
<!DOCTYPE html>
<!--(c) 2022 DuelCraft-->
<html>
<head>
<meta charset="utf-8">
<title>DuelCraft</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="images/icon.png">
</head>
<body background='images/background.png'>
<div class="test">
<h1>DuelCraft</h1>
<p class="main">DuelCraft Minecraft Server</p>
<h2>How do I join?</h2>
<p>Connect to play.duelcraft.games</p>
<div align="center"><iframe src="https://discord.com/widget?id=995858337293926400&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
<div class="email-part">
<p>Email user#example.com for help!</p>
</div>
</div>
<p> ©2022 DuelCraft </p>
</body>
</html>
from your last comment,
I know the solution.
add this to your HTML <head> element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
this makes the website responsive for mobile versions.
this code is automatically generated in most of the IDEs (like vscode)
but in your case, there isn't so just add it
also for not having the margin on top and bottom,
use margin: 0 to the <body> selector
adding a small space in every part (top, left, right) is by adding this code:
the trick there is box-sizing: border-box;
#media screen and (max-width: 600px) {
* {
box-sizing: border-box;
}
body {
padding: 1rem;
}
.test {
width: 100%;
}
}
in this photo I added a padding of 1rem (~16px),
if you want less padding, just change the value
I used a #media because we want that: the code we will use works only on mobile, so on the desktop will be centered, and on mobile there is padding.
for making the discord iframe responsive use width:100% so it will use the maximum space it can have from the parent div.
.test, iframe {
width: 100%;
}
I wrote a comma here to avoid repeating the code multiple times.
for making the <h1> responsive we will use the vw unit in CSS.
h1 {
font-size: 12vw;
}
vw is the width_screen/100
h1 {
text-align: center;
font-size: 64px;
}
p {
text-align: center;
}
h2 {
text-align: center;
}
iframe {
display: block;
border-style: none;
}
html {
height: 100%;
}
body {
font: normal 16px verdana, arial, sans-serif;
background-position: top;
height: 100%;
margin: 0;
}
.test {
width: 500px;
border: 2px solid black;
padding: 50px;
margin: auto;
background-color: #9FE7FF;
}
.email-part {
font-weight: bold;
}
#media screen and (max-width: 600px) {
* {
box-sizing: border-box;
}
body {
padding: 1rem;
}
.test,
iframe {
width: 100%;
}
h1 {
font-size: 12vw;
}
}
<!DOCTYPE html>
<!--(c) 2022 DuelCraft-->
<html>
<head>
<meta charset="utf-8">
<title>DuelCraft</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="images/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body background='images/background.png'>
<div class="test">
<h1>DuelCraft</h1>
<p class="main">DuelCraft Minecraft Server</p>
<h2>How do I join?</h2>
<p>Connect to play.duelcraft.games</p>
<div align="center"><iframe src="https://discord.com/widget?id=995858337293926400&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
<div class="email-part">
<p>Email support#duelcraft.games for help!</p>
</div>
</div>
<p> ©2022 DuelCraft </p>
</body>
</html>
Im trying to get an image to appear on the far right side of the div beside the text but it keeps appearing outside that area. i dont want to hardcode the margins in to force it to appear there. is there a property that will make it appear alongside the text that im missing?
<!DOCTYPE html>
<html>
<head>
<style>
.box{
height: 80px;
width: 400px;
font-size: 14px;
line-height: 45px;
font-family: Georgia;
font-size: 16px;
background-color: white;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
<p style="max-width: 50%">Image<p>
<img src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png" alt="imagedownload" width="15%">
</div>
</body>
</html>
make .box div display: flex; justify-content: space-between; width: 100%;
make img width 50px
So your code will be like this:
<!DOCTYPE html>
<html>
<head>
<style>
.box{
height: 80px;
width: 100%;
font-size: 14px;
line-height: 45px;
font-family: Georgia;
font-size: 16px;
background-color: white;
border: 1px solid black;
display: flex;
justify-content: space-between;
}
img {
width: 50px;
}
</style>
</head>
<body>
<div class="box">
<p>Image<p>
<img src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png" alt="imagedownload">
</div>
</body>
</html>
You can use Flexbox:
<!DOCTYPE html>
<html>
<head>
<style>
.box{
height: 80px;
width: 400px;
font-size: 14px;
line-height: 45px;
font-family: Georgia;
font-size: 16px;
background-color: white;
border: 1px solid black;
display:flex;
}
</style>
</head>
<body>
<div class="box">
<p style="max-width: 50%">Image<p>
<img style="float:right" src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png" alt="imagedownload" width="15%">
</div>
</body>
</html>
My html form arpitpkh.pythonanywhere.com works fine on pc but not responsive on mobile phones(I'am using iphone7) even though i've added the <meta> tag.
Here's my html code for 'home.html'
What's wrong with my code?? What should i change in my code?
body {
background-image: url("/static/grey.jpg");
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
text-align: center;
margin-top: 250px;
font-size: 70px;
color: coral;
}
.input2:hover {
background-color: coral;
color: white;
}
.input1 {
position: absolute;
top: 60%;
left: 37%;
width: 250px;
height: 30px;
}
.input2 {
position: absolute;
top: 59.4%;
left: 59%;
width: 87px;
height: 35px;
background-color: #ddd;
border: none;
color: black;
padding: 10px 5px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
transition: 0.3s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="main.js"></script>
</head>
<body>
<p>
<form action='/weather' method="post">
<h1>City Name:</h1><input class="input1" type="text" name="city_name"> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</p>
</body>
</html>
You're using absolute positioning and defining sizes in px which stays the same on all screen sizes, making your design unresponsive.
You need to use responsive units like ems and media queries.
Check out this article on responsive design principles and this quick tutorial.
I have created a div which is normal as a rectangular shape but I need a code to work such that lower edge of div is slanted and likewise other div's below it(which could have slanted edges again).Any help would be appreciated.
This is my code snippet until now:
<!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">
<title>Assignment</title>
<!-- Bootstrap Styling css-->
<style type="text/css">
.container{
width: 100%;
padding-top: 25px;
background-color: black;
height: 300px;
}
#logo{
background-color: #FFFFFF;
float: left;
border-radius: 20px;
}
#eduhead{
/*padding-left: 40px;*/
margin-left: 10px;
color: #3C89AA;
font-weight: bold;
}
#newref{
color: white;
font-size: medium;
text-align: right;
font-weight: lighter;
}
table{
width: 100%;
}
#signup{
color:#FFFFFF;
border-style: solid;
border-width: 2px;
border-color: #3C89AA;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<th></th>
<th id="eduhead"><img src="assets/Group 31.png" id ="logo"
alt="img"> ASSIGNMENT</th>
<th>Blog</th>
<th>Packages</th>
<th>Login</th>
<th>Sign Up</th>
</tr>
</table>
</div>
<!--Including all the JavaScript Files of bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<!--Bootstrap Scrit CDN-->
The above is my code including all the CDN for Bootstrap. Any suggestions?
Here you can see different approaches to your problem. Below I placed an example, you can adjust precise values. I hope that helps.
.slanted {
position: relative;
background: red;
padding: 30px;
box-sizing: border-box;
clip-path: polygon(0 0,100% 0vw,100% 75%,0 100%)
}
<div class="slanted">
Content.
</div>
So I'm just having some fun with HTML and CSS, and I was trying to overlay some text over an image.
The way I was taught was to give the image a div all for itself, and set it as the background image. Then you could type right over it.
However, I want the background-image of the div to comply to some CSS I already wrote, telling the image to scale to the page's width.
Is there a way of applying CSS to the 's background image? Or should I choose another route?
Thanks in advance,
Rain
Code:
body {
background-color: #d0d0d5;
}
#pageWrapper {
margin-left: -10px;
margin-top: -15px;
margin-right: -200px;
background-color: #9b9a9d;
height: 1500px;
width: 100%;
}
#header {
font-family: Lato;
font-weight: bold;
background-color: #ffffff;
height: 70px;
width: 100%;
border-bottom: 2px solid #E8E8F0;
}
.links {
list-style-type: none;
font-size: 14px;
color: #000;
}
.linkLeft {
float: left;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-right: 20px;
color: #000;
text-transform: uppercase;
}
.linkRight {
float: right;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-left: 20px;
color: #000;
text-transform: uppercase;
}
#link5 {
padding-right: 40px;
}
#imageWrapper {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#jumbotron {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
background-image: url(img/Canadian-Rockies-Mountains.jpg);
}
<!DOCTYPE html>
<html lang=en>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="main.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="pageWrapper">
<div id="header">
<ul class="links"><li>Home</li>
<li>Browse</li>
<li>Help</li>
<li>Log In</li>
<li>Sign Up</li></ul>
</div> <!--header END-->
<div id="imageWrapper">
<!--<div id="imageText">
<h1>Discover the Canadian Rockies.</h1>
<p>Book a trip to Canada today, guy.</p>
</div>-->
<div id="jumbotron"></div>
<!--Original code used to place image before I wanted text overlay follows-->
<!--<img id="jumbotron"src="img/Canadian-Rockies-Mountains.jpg" />-->
</div>
</div> <!--pageWrapper END-->
</body>
</html>
Look here:
http://www.w3schools.com/css/css3_backgrounds.asp
http://www.w3schools.com/css/css_background.asp
These properties (like background-size) will be in relation to the div who has the background-image set. To make the div itself fill its parent, set width: 100% in the div's class
simple example to apply css for image inside div
CSS
.header-shadow{
background-image: url('../images/header-shade.jpg');
background-color:red;
height:50px;
}
JsFiddle
you can try something like this:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url("http://www.w3schools.com/cssref/paper.gif");
width: 100%;
}
</style>
</head>
<body>
<div>
<h1>Hello World!</h1>
</div>
</body>
</html>
If I'm reading your question properly, background-size: cover will force the image to expand the way you want. I've modified your code, is this the effect you're looking for?
body {
background-color: #d0d0d5;
}
#pageWrapper {
margin-left: -10px;
margin-top: -15px;
margin-right: -200px;
background-color: #9b9a9d;
height: 1500px;
width: 100%;
}
#header {
font-family: Lato;
font-weight: bold;
background-color: #ffffff;
height: 70px;
width: 100%;
border-bottom: 2px solid #E8E8F0;
}
.links {
list-style-type: none;
font-size: 14px;
color: #000;
}
.linkLeft {
float: left;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-right: 20px;
color: #000;
text-transform: uppercase;
}
.linkRight {
float: right;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-left: 20px;
color: #000;
text-transform: uppercase;
}
#link5 {
padding-right: 40px;
}
#imageWrapper {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
background-image: url(http://placekitten.com/g/200/300);
background-size: cover;
height: 200px;
}
<!DOCTYPE html>
<html lang=en>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="main.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="pageWrapper">
<div id="header">
<ul class="links"><li>Home</li>
<li>Browse</li>
<li>Help</li>
<li>Log In</li>
<li>Sign Up</li></ul>
</div> <!--header END-->
<div id="imageWrapper">
<div id="imageText">
<h1>Discover the Canadian Rockies.</h1>
<p>Book a trip to Canada today, guy.</p>
</div>
</div>
</div> <!--pageWrapper END-->
</body>
</html>
This is how you cover a complete screen and make it adapt to screen size.
html, body {
position:relative;
height: 100%;
background:url('yoururl')no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}