I want to make my text overlap over this image in relative position, while also staying in the 100vmin boundaries. Here is my HTML code. I know the image won't show on Stack Overflow, but the image is an SVG file. The SVG is an exact sqaure, being 332 in width and height in the SVG file(as a txt file).
<!DOCTYPE html>
<!-- Created and Copyright of MrEthanVlogsandGames -->
<html lang="en">
<head>
<title>Test</title>
<link rel="icon" href="/images/tab_icon.svg">
<style>
/******
FONTS
******/
#import url('https://fonts.googleapis.com/css?family=Roboto');
/******
EVERYTHING ELSE
******/
body {
font-family: Roboto;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
ul {
display: inline-block;
}
.app {
width: 100vmin;
height: 100vmin;
}
.starting_page > img {
display: block;
width: 100%;
z-index: 1;
}
p.text {
display: block;
position: relative;
text-align: center;
font-weight: bold;
color: #fff;
text-align: center;
z-index: 2;
}
</style>
</head>
<body>
<div class="app">
<div class="starting_page">
<img src="/images/starting_page.svg">
<p class="text">Overlapping Text</p>
</div>
</div>
</body>
</html>
The position: relative needs to be on parent element, then you use position: absolute on the element you want to overlap and position them within the relative parent using top left etc.
Technically you can move an element around with position: relative and top left etc but the problem is that it'll still take up space in it's original position. Above method doesn't have this problem.
body {
font-family: Roboto;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.app {
position: relative;
width: 100vmin;
height: 100vmin;
}
.starting_page>img {
display: block;
width: 100%;
z-index: 1;
}
p.text {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
text-align: center;
font-weight: bold;
color: #fff;
z-index: 2;
}
<div class="app">
<div class="starting_page">
<img src="https://picsum.photos/332">
<p class="text">Overlapping Text</p>
</div>
</div>
Related
I want to put watermark-text at the center of page. but it's not work it always go to the left of page. I try to use top and left with the #background element but the font-size of #watermark-text get smaller how can I put #watermark-text in the center without change the font-size.
#background {
position: absolute;
background: white;
z-index: 0;
}
#content {
z-index: 1;
}
#watermark-text {
position: absolute;
color: #eae9e9;
font-weight: bold;
font-size: 800px;
}
<div id="background">
<p id="watermark-text">WaterMark</p>
</div>
<div id="content" </div>
I've used display: flex; align-items: center; justify-content: center; on the parent to center the child horizontally and vertically and in order to achieve that we need to set a height and a width to the parent.
#background {
height: 100vh;
width: 100%;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
#content {
z-index: 1;
}
#watermark-text {
color: #eae9e9;
font-weight: bold;
font-size: 800px;
}
<div id="background">
<p id="watermark-text">WaterMark</p>
</div>
<div id="content"> </div>
If by watermark you mean text that overlays the screen with text then you can do it very simply by setting the body to position: relative. This means that when we set the background div with position: absolute and inset:0, the watermark is positioned relative to the body element. This makes the background div cover the whole page.
Use grid and place-items center to put the text in the center of the screen. I've coloured the background and set opacity on the text so you can see that it's overlaid the content.
Note: I've set the font size a percentage of the viewport width using the vw unit so as you make the screen bigger, the watermark increases in size to suit. You can set this to a pixel value or, even better, rem or em.
If you want the watermark not to move with the screen scroll, change position: absolute to position: fixed.
Any questions, just pop a comment in and I'll respond.
body {
position: relative;
margin: 0;
}
#background {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #eae9e9;
background-color: rgba(0, 192, 0, 0.5);
opacity: 0.5;
font-weight: bold;
font-size: 15vw;
}
<div id="background">WaterMark</div>
<div id="content">
<img src='https://picsum.photos/id/237/400/900'>
</div>
#background {
position: fixed;
background: white;
width: 100vw;
height: 100vh;
top: 0px;
left: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
z-index: -10;
}
#content {
z-index: 10;
width: 100vw;
height: 100vh;
color: black;
}
#watermark-text {
color: #eae9e9;
font-weight: bold;
font-size: 800px;
}
<div id="background">
<p id="watermark-text">WaterMark</p>
</div>
<div id="content">jlsgdfjlgdsfjodfgjoifdgjasfddddddddddds<br>joiasjoidsajoasfds </div>
This is how I would do it looks strange in the editor but should work perfectly on the page, alternative you can just set a background to the div itself where to content is, be aware that this won't be secure as anyone can just change the HTML and CSS clientside anyway.
.watermark {
/* Used to position the watermark */
position: relative;
}
.watermark__inner {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Absolute position */
left: 0px;
position: absolute;
top: 0px;
/* Take full size */
height: 100%;
width: 100%;
}
.watermark__body {
/* Text color */
color: rgba(0, 0, 0, 0.2);
/* Text styles */
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
/* Rotate the text */
transform: rotate(-45deg);
/* Disable the selection */
user-select: none;
}
I have been trying to get the header image to be shorter, however, I cannot figure out how to. Here is the HTML:
<div class="header">
<img src="images/header_sea(3).jpg" width="99%" class="header_image" alt="sea_sky">
<div class="header_title title"> *.• ʚ welcome to my ocean! ɞ •.* </div>
</div>
Here is the CSS:
html, body {
height: 100%;
width: 99%;
text-align: center;
}
.title{
font-family: 'Poppins', sans-serif;
font-size: 45px;
font-weight: bold;
color: #FB79E1;
text-align: center;
text-shadow: 3px 3px white;
}
.header{
position: relative;
}
.header_image{
opacity: 0.55;
height: 40%;
width: 99%;
}
.header_title{
position:absolute;
top: 0;
left: 0;
height: 100%;
width: 99%;
display: flex;
justify-content: center;
align-items: center;
}
I tried adjusting the height percentage in .header_image, but the image doesn't get shorter when I change the value.
The header needs a size associated with it. Otherwise the image has nothing to be "40%" of since the header is just using auto sizing.
Relevant code
.header {
position: relative;
/* Give the header (containing element) a size, can be %, px, etc.
Also keep in mind to use a percentage as a size the body needs a percentage size as well */
height: 20%;
}
Another good practice is to use semantic elements when possible, so consider using <header> instead of a div with a class of header.
html,
body {
height: 100%;
width: 99%;
text-align: center;
}
.title {
font-family: 'Poppins', sans-serif;
font-size: 45px;
font-weight: bold;
color: #FB79E1;
text-align: center;
text-shadow: 3px 3px white;
}
.header {
position: relative;
/* Give the header (containing element) a size, can be %, px, etc.
Also keep in mind to use a percentage as a size the body needs a percentage size as well */
height: 20%;
}
.header_image {
opacity: 0.55;
height: 100%;
width: 99%;
}
.header_title {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 99%;
display: flex;
justify-content: center;
align-items: center;
}
<header class="header">
<img src="https://98e50e5e-ef9b-4f10-9bb4-65acdcdf4429.id.repl.co/images/header_sea(3).jpg" class="header_image" alt="sea_sky">
<div class="header_title title"> *.• ʚ welcome to my ocean! ɞ •.* </div>
</header>
try removing the width attribute from the image (inline) and change the width in .header_image
I did it for you below
<div class="header">
<img src="https://98e50e5e-ef9b-4f10-9bb4-65acdcdf4429.id.repl.co/images/header_sea(3).jpg"
class="header_image"
alt="sea_sky"
/>
<div class="header_title title"> *.• ʚ welcome to my ocean! ɞ •.* </div>
</div>
.header_image{
opacity: 0.55;
height: 40%;
width: 70%;
}
I am having trouble with getting a HTML website to display the way I want. I have made a banner and a nav bar, but I'm having a hard time when trying to add anything below the nav; it either covers the banner or gets covered by it.
This is the 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> Home: Old Barber </title>
</head>
<body id="body"><link rel="stylesheet" href="test.css">
<div id="wrapper">
<header id="header"> Welcome </header>
<div id="bannerHolder">
<div class="banner">
OLD BARBER
</div>
<nav id="nav">
Home
Products
About
</nav>
</div>
</div>
<div class="container">
<img src="https://www.open.edu/openlearn/ocw/pluginfile.php/1654608/mod_oucontent/oucontent/93155/8a822f73/b6b08556/mse_s6_figure_3.jpg" alt="Barber" class="img"></img>
<div class="overlay">
<div class="text">Shop</div>
</div>
</body>
</html>
Here is the CSS:
/* Imported fonts */
#import url('https://fonts.googleapis.com/css2?family=Merienda:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
#wrapper {
background: orange;
display: block;
margin: auto;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
}
#bannerHolder {
background: #aaa;
display: block;
height: 100px;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
height: 200%;
left: 0;
margin: auto;
position: relative;
right: 0;
text-align: center;
text-shadow: 2px 2px 4px black;
}
#body{
background-color: gray;
}
#nav{
background-color: orange;
color: black;
display: flex;
justify-content: space-around;
padding: 0.5%;
position: relative;
text-align: center;
}
#h1{
font-family: 'Italianno', cursive;
}
.container{
position: relative;
width: 50%;
}
.img{
display: block;
height: auto;
width: auto;
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: auto;
opacity: 0;
transition: .5s ease;
background-color: orange;
}
.container:hover .overlay{
opacity: 1;
}
.text{
color: white;
font-size: larger;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Any help is greatly appreciated. Thanks.
EDIT: under is the result after removing the position: absolute; from the header. This, however, also alters the way in which I'd like the page to be displayed; which is that the banner, nav etc. is supposed to fill the page on the left, right and top.
The problem is that You have
<div id="wrapper"> and <div class="container"> below.
<div id="wrapper"> - has position: absolute as a style.
Position absolute https://developer.mozilla.org/en-US/docs/Web/CSS/position:
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is
not auto. The margins of absolutely positioned boxes do not collapse
with other margins.
That means that Your wrapper div, creates no space, so container div ignores its position.
Try to remove position: absolute from Your header.
Edit:
Sorry for late answer
#wrapper {
background: orange;
text-align: center;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
text-align: center;
text-shadow: 2px 2px 4px black;
}
body {
background-color: gray;
margin: 0;
padding: 0;
}
Edited CSS for header would look something like this. What I've done is I removed the height parameter of #bannerHolder. This height was defining the height of 100px for bannerHolder, however the height of the inside elements of bannerHolder was bigger, so there was an overlap. I also removed some unused CSS properties.
Also for banner to fill the whole space - the common pattern is to set padding: 0; margin: 0; for body tag. I often start my projects with this set-up:
html, body {
padding: 0;
margin: 0;
}
https://jsfiddle.net/oamx38y6/36/
I want to center an element within a parent. That's easy enough with transform, flexbox, grid and so on...
The problem is the overflow-behavior. When the parent shrinks below the dimensions of the child, scrollbars appear. But they do not allow me to scroll to the top-left of the child. Here's what I mean:
gif animation showing window-resizing and the css behavior
This example uses flexbox for it's centering, html below:
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
div.content {
flex-shrink: 0;
width: 600px;
height: 600px;
background-color: darkred;
}
<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</main>
<footer>
</footer>
</body>
</html>
What I want to achieve looks more like this:
gif animation showing window-resizing and the css behavior
In this example I didn't use flexbox-centering. I wrapped the content within a container that has it's margin set to: 0 auto. This will achieve the wanted behavior on the x-axis, but not the y-axis. How can I achieve this on both axes?
Below the html and css of the second example using a container and auto-margin for centering:
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
/* display: flex;
justify-content: center;
align-items: center; */
overflow: auto;
}
div.container {
margin: 0 auto;
width: 600px;
height: 100%;
background-color: #333333;
}
div.content {
/* flex-shrink: 0; */
width: 600px;
height: 600px;
background-color: darkred;
}
<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="container">
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
Ah... I hope to find a solution that doesn't use javascript for this behavior. In case I find the solution, I'll post it with a corresponding gif.
Use display: flex on the .container and margin: auto on the .content .
This is a method to solve the centering problems of flex and by this way it will center .content
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
/*display: flex;
justify-content: center;
align-items: center; */
overflow: auto;
}
div.container {
display: flex;
margin: 0 auto;
width: 600px;
height: 100%;
background-color: #333333;
}
div.content {
/* flex-shrink: 0; */
margin: auto;
width: 600px;
height: 600px;
background-color: darkred;
}
<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="container">
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
This is only happening in Chrome, not Firefox or IE -
I have three images with text overlayed. The three images are responsive, and take up the full width of the browser window. Here's a screenshot:
When I resize the window to make it narrower, somehow, the html is becoming smaller than the size of the page. For example, here:
This only happens very quickly before the window seems to readjust, and everything is fine. However, I'd still like to fix it.
I've tried using a flexbox footer instead of the vh method but that didn't help.
My HTML and CSS are below. A note about the HTML - I'm sure there is another way to get the three pictures to fit together without any whitespace besides cramming the HTML all together like it is - sorry for being a hack. But that's not the source of the problem, as far as I can tell - it happens when there is only one picture as well.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="styles/index-footer-test-750.css" type="text/css" rel="stylesheet">
<title>Good Boy Dog Care</title>
</head>
<body>
<div class="index-content">
<div id="we-love-dogs-one"><img id="we-love-dogs-one-image" src="images/cute-dog-one-cropped.jpg"><div id="we-love-dogs-one-text"><p>WE</p></div></div><div id="we-love-dogs-two"><img id="we-love-dogs-two-image" src="images/cute-dog-two-cropped.jpg"><div id="we-love-dogs-two-text"><p>LOVE</p></div></div><div id="we-love-dogs-three"><img id="we-love-dogs-three-image" src="images/cute-dog-three-cropped.jpeg"><div id="we-love-dogs-three-text"><p>DOGS</p></div></div>
</div>
<div class="footer">
</div>
</body>
</html>
And CSS:
* {
box-sizing: border-box;
margin: 0;
}
.index-content {
min-height: calc(100vh - 2em);
padding: 0;
margin: 0;
}
.footer {
height: 2em;
background-color: rgba(240, 100, 60, 1);
width: 100%;
cursor: default;
}
#we-love-dogs-one {
width: 34%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
}
#we-love-dogs-one-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-one-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 17px);
font-size: 1.5em;
display: inline-block;
font-family: "Montserrat";
}
#we-love-dogs-two {
width: 33%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
font-family: "Montserrat";
}
#we-love-dogs-two-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-two-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 24.5px);
font-size: 2em;
display: inline-block;
font-family: "Montserrat";
}
#we-love-dogs-three {
width: 33%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
}
#we-love-dogs-three-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-three-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 17px);
font-size: 1.5em;
display: inline-block;
font-family: "Montserrat";
}
Any help would be appreciated. Thanks!
cliffgallagher# , try using divs to auto resize rather than hardly setting the width or height per image, here is an example post: How do I auto-resize an image to fit a div container.
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>