click for screenshot of problem....
on window screen everything is ok but responsive sizes, my image overflow on html.
i set the image as background of a div for parallex; how can i fix the overflowing side? i work more than 4 hours please help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WonderWoman</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div class="rellax hero-image" data-rellax-speed="0"></div>
<div class=" rellax parallax-el" data-rellax-speed="-1"></div>
<div class="rellax logo" data-rellax-speed="12"></div>
<div class="rellax wonder" data-rellax-speed="7"></div>
<div class="rellax woman" data-rellax-speed="5"></div>
<div class="rellax clouds" data-rellax-speed="0"></div>
</body>
</html>
in css, i gave images as background to divs.
i gave background to all divs to make parallax scrolling. it is working but overflow still there.
html , body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background:#fff;
overflow-x: hidden;
overflow: hidden;
scroll-behavior: smooth;
}
.bg-light {
background: none !important;
}
.navbar{
z-index: 1000;
}
.navbar-brand {
margin-left: 25px;
margin-top: 25px;
}
.navbar-nav a{
color: white !important;
letter-spacing: 1px;
padding: 1px;
margin-right: 30px;
}
.hero-image{
width: 100%;
background: url(backg.jpg) no-repeat 50% 50%;
height: 100vh;
background-size: cover;
position: absolute;
z-index: 0;
}
.parallax-el {
background: url(woman.png) no-repeat 50% 50%;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
left:30%;
z-index: 2;
overflow: hidden;
}
.logo {
background: url(wlogo.png) no-repeat 50% 50%;
background-size: contain;
width: 100%;
height: 40%;
position: absolute;
top:42%;
z-index: 1;
}
.clouds {
width: 100%;
background: url(sparkle.png) no-repeat 50% 50%;
height: 100vh;
background-size: cover;
position: absolute;
z-index: 3;
opacity: 0.3;
}
.whitespace{
width: 100%;
height: 100vh;
}
.content {
background: #fff;
height: 100vh;
width: 100%;
margin: 0 auto;
padding: 80px 0;
font-family:Arial, Helvetica, sans-serif;
height: 100vh;
position: absolute;
z-index:1000;
}
.wonder{
background: url(wondertext.png) no-repeat 50% 50%;
background-size: contain;
width: 25%;
height: 100%;
position: absolute;
left: 33%;
top:5%;
z-index: 1;
}
.woman{
background: url(WOMANtext.png) no-repeat 50% 50%;
background-size: contain;
width: 30%;
height: 100%;
position: absolute;
left: 30%;
top:15%;
z-index: 1;
}
Make it left: 0 on smaller screens.
Related
i got a problem with my code. Everytime i move my page the text is on a completly other position and overlows the most of the time. i am pretty new to coding and i really dont know how to fix it at all.
This is my HTMl data.
html,
body {
background-image: url('./pics-txt/group/Need2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.filter {
backdrop-filter: blur(2px);
height: 100%;
width: 100%;
z-index: 1;
}
.container {
display: flex;
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 40%;
height: 20%;
padding: 20px;
text-align: center;
}
.item {
border: solid 0px;
position: relative;
left: 34%;
top: 0%;
padding: 2%;
text-align: center;
color: white;
z-index: 2;
font-size: 90%;
}
#text {
position: relative;
left: 0%;
padding: 1%;
top: 30%;
z-index: 2;
color: white;
text-align: center;
font-size: 180%;
}
#media only screen and (max-width:70%) {
.container {
width: 100%;
}
}
<head>
<meta charset="UTF-8" />
<meta hrrp-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./test-txt.css">
<title>Tomorrow x Together</title>
</head>
<body>
<div class="filter"></div>
<div class="container">
<div class='item'>MOA</div>
<div class="item">Member</div>
<div class="item">Big Hit</div>
<h1 id="text">Tomorrow x Together</h1>
</div>
</video>
</body>
i really dont know how to fix it. i also tried to just dont use a flexbox. but i think my Knowledges for that arent good enough xD
i also tried to vary between flex-directions, flex-wraps between different width, heights. to work with and without a div.
I did everything for me possible.
I see it is a mix of position, z-index, flex, percentages, etc. It is difficult to find out what the question is. It seems you want to center a box but I'm not sure. If this is the case, try this as starting point.
But again, to help you out please give some extra info about the required layout.
* {
box-sizing: border-box;
}
body {
height: 100%;
margin: 0;
background-image: url('./pics-txt/group/Need2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.view {
display: flex;
width: 100%;
min-height: 100%;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.center-container {
width: 40%;
height: 20%;
margin: auto; /* center in middle */
background-color: rgba(0, 0, 0, 0.4);
}
.container {
display: flex;
padding-bottom: 10px;
border: 3px solid #f1f1f1;
color: white;
font-weight: bold;
text-align: center;
/* transform: translate(-50%, -50%); */
}
#media only screen and (max-width: 600px) {
.center-container {
width: 100%;
}
}
.item {
width: 33.333%;
padding: 2%;
/* z-index: 2; */
color: white;
font-size: 90%;
}
#text {
padding: 1%;
/* z-index: 2; */
color: white;
text-align: center;
font-size: 180%;
}
<body>
<div class="view">
<div class="center-container">
<div class="container">
<div class='item'>MOA</div>
<div class="item">Member</div>
<div class="item">Big Hit</div>
</div>
<h1 id="text">Tomorrow x Together</h1>
</div>
</div>
</body>
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 1 year ago.
I wanted to creat a background image blur I applied it and everything just blurred so here is the html and this is just fast re creation of the full project and if you didn't understand the class names talk to me
<!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>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
</body>
</html>
Here's the css to help
font-size: 15pt;
width: 500px;
height: 500px;
background-image: url("bto.jpg");
filter: blur(8px)
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
Or you can apply it to a full size container as below, set the container size and position to absolute and then the rest of the content to relative and set the z-indexes.
body, html{
width: 100%;
height: 100%;
position: relative;
margin:0;
padding:0;
}
.bgImageContainer{
background-image:url('https://placeimg.com/1000/1000/people');
width:100%; height:100%;
-webkit-filter: blur(5px);z-index:0;
position:absolute;
background-position: center;
background-size:cover;
z-index:-10;
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="bgImageContainer">
</div>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
You can't directly use blur filter in body. But you could apply the background image and filter to a pseudo element on the body. You can use below code to add blur effect in your background.
body {
margin:0;
padding:0;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
}
body:before {
content: "";
position: absolute;
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_GUUtZTKhhfKuCm9q5Ab77HQ8KiTFng3usA0MdgVmIXBC5tgHk3XiecscRsddpRi4SA&usqp=CAU);
background-size: cover;
height:100%;
z-index: -1000; /* Keep the background behind the all your content */ height: 20%; width: 20%;
/* don't forget to use the prefixes you need */
transform: scale(5);
transform-origin: top left;
filter: blur(1px);
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
Using the code given in the question, and assuming it's the body that the background is required on, you can add a pseudo before element to the body and put the background on that and blur it.
That way only the image gets blurred, not everything else.
body {
font-size: 15pt;
width: 500px;
height: 500px;
}
body::before {
background-image: url("https://picsum.photos/id/1015/1024/768");
filter: blur(8px);
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
content: '';
z-index: -1;
}
.trbp {
width: 500px;
height: 40px;
border: black;
}
.trb {
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
display: inline-block;
}
.btp {
position: relative;
top: 120px;
left: 30px;
}
.bth {
position: relative;
top: 100px;
left: 30px;
}
.blb {
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
I have two images that essentially need to be on top of each other. The logo is somehow stuck being an opaque white instead of the solid white my client wants it to be. How do I fix this?
HTML & CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PALPA | Tunes for the Toasties</title>
</head>
<style>
body{
background-image:url("../img/background-min.JPG");
background-size: 100%;
background-repeat: no-repeat;
}
#palpa_white{
height: 550px;
width: 490px;
margin-left: 240px;
}
.center_container{
height: 580px;
width: 1000px;
background-color: black;
opacity: 0.7;
margin-left: 22%;
margin-top: 9%;
}
</style>
<body>
<div class = "center_container">
<img src = "../img/palpa_white.png" id = "palpa_white" alt = "kael_logo">
</div>
</body>
</html>
Image of Issue
Your CSS specifies opacity: 0.7 for the center_container div. Therefore, the child img tag also inherits this 70% opacity.
You need to override the opacity for the #palpa_white style.
#palpa_white{
height: 550px;
width: 490px;
margin-left: 240px;
opacity: 1;
}
What you need is to change opacity: 0.7; to opacity: 1; in the #palpa-white style section. Here's a demo of this:
.body {
border-radius: 10px;
max-width: 500px;
height: 300px;
margin: 0.01em auto;
background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
}
h1 {
color: #ffffff;
text-align: center;
}
body {
background: #121212;
font-family: 'Overpass', sans-serif;
}
.body #before {
position: relative;
top: 50%;
transform: translateY(-50%);
background: #ffffff;
max-width: 250px;
height: 100px;
margin: 0.01em auto;
opacity: 0.7;
border-radius: 10px;
}
.body #after {
position: relative;
top: 50%;
transform: translateY(-50%);
background: #ffffff;
max-width: 250px;
height: 100px;
margin: 0.01em auto;
opacity: 1;
border-radius: 10px;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
background: #121212;
border: none;
}
body::-webkit-scrollbar-thumb {
border-radius: 5px;
background-image: -webkit-linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
}
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght#300&display=swap" rel="stylesheet">
<h1>Before</h1>
<div class='body'>
<div id='before'>
</div>
</div>
<h1>After</h1>
<div class='body'>
<div id='after'>
</div>
</div>
I have a "lightbox" type og image viewer that I'm using to navigate through some images.
The images have different aspect ratio, and I need to put the arrows on the edge. When I resize the websize the images follows the size of the webpage, which is very good
However, the arrows are just floating away from the image :( Any ideas?
body {
background-image: url("../img/bg-masthead.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
margin: 0;
}
.modal {
position: fixed;
width: 100%;
height: 1000%;
background-color: rgba(0, 0, 0, 0.4);
/* display: none; */
}
.modal-content {
display: inline-block;
width: 95%;
height: 95%;
position: fixed;
top: 40px;
left: 50%;
transform: translate(-50%, 0);
}
img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.prev {
top: 50%;
left: 8px;
}
.close {
top: 4px;
right: 8px;
}
.next {
top: 50%;
right: 8px;
}
.arrow {
position: absolute;
color: white;
font-weight: bold;
font-size: 50px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<title>Bilde galleri</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<div id="lightBox" class="modal">
<div class="modal-content" id="img_container">
<img id="largeImg" src="images/2007/Malayisa/IMG_0243.jpg">
<div class="prev arrow" onclick="plusSlides(-1)">❮</div>
<div class="next arrow" onclick="plusSlides(1)">❯</div>
<div class="close arrow" onclick="document.getElementById('lightBox').style.display='none'">×</div>
</div>
</div>
</body>
</html>
I am trying to encircle a part of back ground image with a div, but when window resizes it all becomes messed up, and I need it to display the same way on different screen sizes.
I am using google chrome
thank you for any ideas..
EXAMPLES
HTML
<div class="stage1">
<div class="theRoom">
<div class="table items"></div>
<div class="picture items"></div>
<div class="bookstore items"></div>
<div class="door items"></div>
<div class="makeup items"></div>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
.items {
border: 2px solid red
}
.items:hover {
-webkit-filter: drop-shadow(3px 3px 6px red);
/* background-size: contain;*/
}
.stage1 {
width: 1960px;
}
.theRoom {
background-image: url("../img/room/room.jpg");
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.table {
background-image: url("../img/room/room_0000_table.png");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 78.7%;
top: 54%;
width: 296px;
height: 424px;
z-index: 6;
}
.bookstore {
background-image: url("../img/room/room_0001_bookstore.png");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 64.6%;
top: 33.3%;
width: 243px;
height: 462px;
z-index: 3;
}
.door {
background-image: url("../img/room/room_0002_door.png");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 46%;
top: 30%;
width: 217px;
height: 421px;
z-index: 3;
}
.makeup {
background-image: url("../img/room/room_0003_makeup.png");
background-repeat: no-repeat;
position: relative;
background-size:contain;
left: 30.7%;
top: 46.3%;
width: 9.7%;
height: 299px;
z-index: 3;
}
.picture {
background-image: url("../img/room/room_0004_picture.png");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 9%;
top: 39%;
max-width: 123px;
max-height: 217px;
z-index: 2;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
.items {
border: 2px solid red
}
.items:hover {
-webkit-filter: drop-shadow(3px 3px 6px red);
/* background-size: contain;*/
}
.stage1 {
width: 1960px;
}
.theRoom {
background-image: url("../img/room/room.jpg");
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.table {
background-image: url("../img/room/room_0000_table.png");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 78.7%;
top: 54%;
width: 296px;
height: 424px;
z-index: 6;
}
.bookstore {
background-image: url("../img/room/room_0001_bookstore.png");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 64.6%;
top: 33.3%;
width: 243px;
height: 462px;
z-index: 3;
}
.door {
background-image: url("../img/room/room_0002_door.png");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 46%;
top: 30%;
width: 217px;
height: 421px;
z-index: 3;
}
.makeup {
background-image: url("../img/room/room_0003_makeup.png");
background-repeat: no-repeat;
position: relative;
background-size:contain;
left: 30.7%;
top: 46.3%;
width: 9.7%;
height: 299px;
z-index: 3;
}
.picture {
background-image: url("../img/room/room_0004_picture.png");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 9%;
top: 39%;
width: 123px;
height: 217px;
z-index: 2;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>THE ROOM</title>
<link rel="stylesheet" href="css/style.css">
<script src="script/jquery-3.1.0.min.js"></script>
<script src="script/jquery-ui-1.12.0.custom/jquery-ui-1.12.0.custom/jquery-ui.min.js"></script>
</head>
<body>
<!-- <img src="img/The-master-bedroom.jpg" alt="" class="room">-->
<div class="stage1">
<div class="theRoom">
<div class="table items"></div>
<div class="picture items"></div>
<div class="bookstore items"></div>
<div class="door items"></div>
<div class="makeup items"></div>
</div>
</div>
<script src="script/main.js"></script>
</body>
</html>