I am trying to create a relatively simple classroom-like site with overlaying images. Basically, there are a bunch of pictures you can interact with that will take you to different websites with different resources. I am struggling immensely with getting the sizing and proportions of all the images correct. I want there to be a background image that stretches to span the entire page and then carefully placed images/text over the background image/other images. As you can tell, when resizing the JSFiddle, everything gets disproportionate.
A more concrete example of what I'm trying to do: You can see the text over the "chalkboard" image. I want it to appear as if the text is writing on the chalkboard so it shouldn't be moving off the blackboard when resizing the window or looking at it through different aspect ratios. I'm trying to do this with lots and lots of images so a thorough explanation would be most helpful.
JSFiddle
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(71, 71, 71);
color: white;
text-align: center;
opacity: 0.75;
}
a {
color: lightgray;
}
p {
font-family: 'Schoolbell', arial, serif;
color: white;
}
.container {
position: fixed;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
background-image: url("https://images.unsplash.com/photo-1630699376059-b781970715b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
background-repeat: no-repeat;
background-size: 100%;
}
#whiteboard img {
width: 40%;
position: absolute;
top: 20%;
left: 35%;
}
#chalkboard img {
width: 20%;
height: 40%;
position: absolute;
top: 2%;
left: 78%;
}
#chalkboard p {
position: absolute;
top: 10%;
left: 80%;
color: white;
font-size: 140%;
text-align: center;
}
<body>
<div class="container">
<div id="whiteboard"><img src="https://images.unsplash.com/photo-1497409988347-cbfaac2f0b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" /></div>
<div id="chalkboard">
<img src="https://images.unsplash.com/photo-1614292253351-4deb4913c142?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<p>
Hi all!
</p>
</div>
</div>
<div class="footer">
<p>Footer Stuff</p>
</div>
</body>
// Side Note: These aren't the images I'm trying to use, just stock photo examples.
Thank you!
As you already have the positioning done in terms of % of the actual picture I think all you basically need to do is make sure that that picture's container maintains the same aspect ratio whatever the viewport aspect ratio is.
I did a rough look at your webp image and converted it to a png and took the dimensions - you will probably want to refine that to be more accurate.
Here is the snippet:
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(71, 71, 71);
color: white;
text-align: center;
opacity: 0.75;
}
a {
color: lightgray;
}
p {
font-family: 'Schoolbell', arial, serif;
color: white;
}
.container {
position: fixed;
top: 0%;
left: 0%;
/*height: 100%;*/
width: 100%;
aspect-ratio: 873 / 579;
background-image: url("https://i.stack.imgur.com/FJHjE.png");
background-repeat: no-repeat;
background-size: 100% auto;
}
#whiteboard img {
width: 40%;
position: absolute;
top: 20%;
left: 35%;
}
#chalkboard img {
width: 20%;
height: 40%;
position: absolute;
top: 2%;
left: 78%;
}
#chalkboard p {
position: absolute;
top: 10%;
left: 80%;
color: white;
font-size: 140%;
text-align: center;
}
</style>
<html>
<body>
<div class="container">
<div id="whiteboard"><img src="https://images.unsplash.com/photo-1497409988347-cbfaac2f0b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" /></div>
<div id="chalkboard">
<img src="https://images.unsplash.com/photo-1614292253351-4deb4913c142?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<p>
Hi all!
</p>
</div>
</div>
<div class="footer">
<p>Footer Stuff</p>
</div>
</body>
</html>
Note: you will need to decide what to do about the writing - the font-size also needs to be defined in relative terms so it shrinks appropriately.
ADDITION: It's been pointed out that keeping the width always at 100vw causes cropping of the image.
Here is a snippet which 'decides' whether to make the width or the height of the classroom as much as it can be (100vw or 100vh) and adjusts the other dimension so the aspect ratio is always maintained.
<!doctype html>
<html>
<head>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(71, 71, 71);
color: white;
text-align: center;
opacity: 0.75;
}
a {
color: lightgray;
}
p {
font-family: 'Schoolbell', arial, serif;
color: white;
}
.container {
position: fixed;
top: 0%;
left: 0%;
aspect-ratio: 873 / 579;
background-image: url("https://i.stack.imgur.com/FJHjE.png");
background-repeat: no-repeat;
background-size: 100% auto;
}
#media (min-aspect-ratio: 873/579) {
.container {
height: 100vh;
}
}
#media (max-aspect-ratio: 873/579) {
.container {
width: 100vw;
}
}
#whiteboard img {
width: 40%;
position: absolute;
top: 20%;
left: 35%;
}
#chalkboard img {
width: 20%;
height: 40%;
position: absolute;
top: 2%;
left: 78%;
}
#chalkboard p {
position: absolute;
top: 10%;
left: 80%;
color: white;
font-size: 140%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div id="whiteboard"><img src="https://images.unsplash.com/photo-1497409988347-cbfaac2f0b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" /></div>
<div id="chalkboard">
<img src="https://images.unsplash.com/photo-1614292253351-4deb4913c142?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<p>
Hi all!
</p>
</div>
</div>
<div class="footer">
<p>Footer Stuff</p>
</div>
</body>
</html>
Related
I made my text over my image correctly, but the problem is I can't figure out how to make the text in its fixed place without moving when resizing the window.
Here is my code:
img {
height: 100%;
width: 100%;
box-shadow: 0 0 10px black;
}
h1 {
font-family: 'Courier', monospace;
font-size: 1rem;
}
.container {
height: 100vh;
width: 50vh;
position: relative;
text-align: center;
}
.firstName {
position: absolute;
top: 0;
left: 3em;
}
.secName {
position: absolute;
top: 1em;
left: 5em;
color: rgb(200,0,0);
}
<div class="container">
<img src="https://i.pinimg.com/564x/ee/84/e5/ee84e597b90f4b6d827f4c73506e700d.jpg">
<div class="firstName">
<h1>Eren</h1>
</div>
<div class="secName">
<h1>Yeager</h1>
</div>
</div>
You see, when you resize the window the text pop out from the image box.
To make your text linked to the specified position on the image you may set text positioning in percentage. Here is the way that can solve it:
img {
height: 100%;
width: 100%;
box-shadow: 0 0 10px black;
}
h1 {
font-family: 'Courier', monospace;
font-size: 1rem;
}
.container {
height: 100vh;
width: 50vh;
position: relative;
text-align: center;
}
.firstName {
position: absolute;
top: 0;
left: 40%;
transform: translateX(-50%);
}
.secName {
position: absolute;
top: 1em;
left: 60%;
transform: translateX(-50%);
color: rgb(200,0,0);
}
<div class="container">
<img src="https://i.pinimg.com/564x/ee/84/e5/ee84e597b90f4b6d827f4c73506e700d.jpg">
<div class="firstName">
<h1>Eren</h1>
</div>
<div class="secName">
<h1>Yeager</h1>
</div>
</div>
I'm building my first actually decent website basically and I'm creating a background atm with some css and an image and I want to do it just as it is in the picture
.
(accomplished already) but it's not responsive probably because of position: absolute property and I want to make it properly responsive.
Here is the HTML code I am using for the background
.bg {
background: #9359C7;
color: white;
display: grid;
text-align: center;
height: 764px;
width: 1280px;
}
.content {
position: relative;
}
.content img {
width: auto;
height: auto;
position: absolute;
right: -178px;
bottom: 0;
}
<div class="bg">
<div class="content">
<h1>Lol</h1>
<img src="https://www.pikpng.com/pngl/m/69-698658_yami-ygi-y-gi-yu-gi-oh.png" alt="Yugi">
</div>
</div>
EDIT: I put my whole site on this patebin since idk it wouldn't let me upload it on here the snippet I was given did not work for me at least.
This should do the trick:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.hero {
position: relative;
overflow-x: hidden;
}
header {
position: relative;
background: black;
padding: 40px 0;
z-index: 5;
}
.content {
position: relative;
z-index: 5;
color: white;
text-align: center;
width: 70%;
height: 100vh;
max-height: 768px;
background: #9359C7;
padding: 20px;
}
img {
width: auto;
height: 98%;
position: absolute;
right: 30%;
bottom: 0;
transform: translateX(50%);
padding-top: 80px;
z-index: 10;
}
h1 {
margin: 0;
}
<div class="hero">
<header></header>
<div class="content">
<h1>Lol</h1>
</div>
<img src="https://ms.yugipedia.com//c/c4/YamiYugi-DULI.png" alt="Yugi">
</div>
I have a banner div element that has a picture overlapping it. I want to have my text not be overlapped by the image, but am having issues.
Example of the problem:
Here is what my html looks like:
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: white;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<img class="header-logo img" src="../../../assets/CatPicture.png">
<div class="container-fluid header-banner-container">
<span class="banner-text">There is a cat above me</span>
</div>
My questions are:
Should the image be in the container-fluid div, as a best practice? Or is having it outside the banner as I do currently, correct?
How can I get the text to not be overlapped by the image?
Thanks for any advice for the questions, and any other advice you may have!
If the image is a logo or something that belongs in the header, then yes, you should keep the image in the header container, and the text too. You could resolve the issue of the overlapping text easily by simply increasing the vh of the container div and moving the banner-text top attribute down slightly this way.
However, if the case is other than above, and you want to keep the text in that position but make it visible, then you could move the banner text out of the text and position it absolutely from the top. As-is, adjusting the z-index to 0 (e.g.) while it is still within the container div would have no effect as the container div's z-index of -1 would take precedence, and if adjusted higher, would overlap the image also.
Hope this helps
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: white;
position: absolute;
transform: translateY(-50%);
top: 70px;
z-index: 0;
}
<img class="header-logo img" src="http://ssl.gstatic.com/images/icons/gplus-32.png">
<div class="container-fluid header-banner-container">
</div>
<span class="banner-text">There is a cat above me</span>
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Example</title>
<style>
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
border-radius: 100%;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: white;
position: absolute;
transform: translateY(-50%);
top: 49px;
z-index: 0;
left: 50px;
text-shadow: 0px 3px 3px black;
}
</style>
</head>
<body>
<img class="header-logo img" src="https://image.freepik.com/free-vector/geometric-background_23-2148064464.jpg">
<div class="container-fluid header-banner-container">
</div>
<span class="banner-text">There is a cat above me</span>
</body>
</html>
I'm having a very difficult time getting my image centered and responsive without overlapping my text. How do I fix this.
View the issue here
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left:50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="bg3.jpg" /></div>
You have position absolute in your div so you can adjust the top value
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 200px; /* just a sample with a fixed pixel value */
left:50%;
overflow: visible;
}
or try using
position: relative;
That image should probably be a background instead.
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 40px;
margin: 0px;
width: 100%;
background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center top no-repeat;
background-size: contain;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
Or you can move that image behind the text by modifying the z-index.
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left: 50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
z-index: -1;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png" /></div>
It's because of the positioning of your elements.
If you want to have a fixed header your content needs to be pushed down the height of your header. Do this by wrapping your content in a container, and giving it a margin-top equal to the height of your header.
header {
position: fixed;
height: 100px;
}
.content-container {
position: relative;
margin-top: 100px;
}
And your HTML:
<header></header>
<div class="content-container">
</div>
Give your content-container the position: relative. If you want to center items in the center you can either use flexbox or give it a margin: 0px auto;.
Position relative means it's positioned relative to other elements.
Some other things I noticed in your code which could be done better/cleaner:
Use the units em or rem for font-size
It's not necessary to prefix your classes with the element (div.shadow -> .shadow and img.logo -> .logo)
Also I would recommend ordering your CSS following the CSS Box Model. This opts for much cleaner code and better readability.
This means you will get something like this:
.class {
// Positioning first
position: relative;
top: 0;
right: 0;
z-index: 1;
// It's size
width: 500px;
height: 500px;
// It's margin
margin: 0px auto;
// It's border
border: 1px solid blue;
// It's padding
padding: 2em 0;
// Content styling
color: #676766;
background: blue;
}
I don't know why you have written this complex css. It can be possible by some easy css coding.
<style>
div.shadow {
width: 100%;
float: left;
text-align: center;
}
img.logo {
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
width: 100%;
float: left;
}
</style>
So I have two <div> next to each other and I want to make it so when you have little space (Phone for example) it puts the second <div> under the first one with some space. When you're on a 16:9 ratio computer it has them next to each other.
body {
background: #FFFFFF;
}
.box {
float: left;
margin: 10px;
padding: 25px;
max-width: 300px;
height: 300px;
border: 1px solid black;
}
div {
max-width: 2480px;
z-index: 2;
left: 0;
position: absolute;
width: 100%;
height: 50px;
top: 0px;
color: #2D2E32;
background: #2D2E32;
}
/*Box1*/
div2 {
position: absolute;
color: #2D2E32;
background: #2D2E32;
width: 700px;
height: 950px;
top: 700;
left: 200;
}
div3
/*Box2*/
{
position: absolute;
color: #2D2E32;
background: #2D2E32;
width: 700px;
height: 950px;
top: 700;
right: 10%;
}
img {
max-height: 800;
max-width: 2480;
z-index: 1;
width: 100%;
height: 63%;
left: 10%;
}
div4 {
max-height: 59%;
z-index: -1;
position: absolute;
width: 100%;
height: 59%;
top: 5%;
color: #17181A;
background: #17181A;
left: 0;
}
div5 {
max-width: 2480;
max-height: 25;
z-index: 2;
left: 0;
position: absolute;
width: 100%;
height: 25px;
color: #2D2E32;
background: #2D2E32;
}
<body>
<div id="page1">
<!--Task-->
<a id="Task" class="smooth"></a>
</div>
<div2 id="page2">
<!--Box1-->
<a id="Info1" class="smooth" class="box"></a>
</div2>
<div3>
<!--Box2-->
<a id="Info1" class="smooth" class="box"></a>
</div3>
</body>
CSS Media Queries will solve this problem by allowing you to create styles that will be conditionally applied based on a query that you specify. Here's an example:
/* Develop "mobile-first, meaning that your normal styles should reflect how you want
the content to look on a mobile device
div elements will normally appear on their own line, but let's add a little space between
the lines
*/
div { margin:1em; }
/* When the viewport is not bigger than 760px and it is rotated to be wide
put divs next to each other and only move them down when the full width
of the viewport is used up */
#media screen and (max-width:760px) and (orientation:landscape) {
div {
float:left;
margin:auto; /* reset margins back to normal */
}
}
<div>Some div content</div>
<div>Some div content</div>