Hi i create a parallax ui pure css. however when i try run in android and desktop, everything is okay, but when in ios or iphone im getting weird result and the parallax not working also. i dont know why but Can i ask for help? I would really appreciate it.....
Thank youuu..
You can also access the code here:
https://codesandbox.io/s/busy-stallman-0ecz8b?file=/index.html:0-1721
This is the code:
<!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>Static Template</title>
</head>
<style>
/* general CSS, unrelated to parallax or img */
body {
background: #fff;
color: #222;
font-family: "Source Sans Pro", sans-serif;
}
.code {
font-family: "PT Mono", serif;
color: #090;
}
.writing {
width: 74%;
margin-left: auto;
margin-right: auto;
}
#media (max-width: 560px) {
.writing {
width: 96%;
}
}
/* Parallax CSS */
.background-oregon-grapes {
background-image: url("https://marrio-h.github.io/universal-parallax/demo/img/bg3.jpg");
background-size: 100%;
height: 560px;
width: 560px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
margin-left: auto;
margin-right: auto;
}
#media (max-width: 767px) {
.background-oregon-grapes {
height: 330px;
width: 330px;
}
}
/* Image CSS for your SVG */
img {
height: 100%;
width: 100%;
}
</style>
<body>
<div class="background-oregon-grapes">
<img src="https://aeoneal.com/imagery/brain-reverse-cutout.svg" />
</div>
<div class="background-oregon-grapes">
<img src="https://aeoneal.com/imagery/brain-reverse-cutout.svg" />
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
Did you tried to use library like bootstrap for this effect?
also check this case https://codepen.io/Everybodyknows/pen/abbyLOZ
it seems you need to write code like
div.section:last-child {
min-height: 50vh;
padding: 3em calc(20vw - 70px) 6em;
}
Related
I'm a beginner-casual, web developer, I want to surround my menu with a background image, I've tried to do it by myself, but still, it's shows the default white background, can someone please help me out?
Here is my CSS script:
body {
background-image: url(https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.bonappetit.com%2Fstory%2Fhow-to-buy-coffee-beans&psig=AOvVaw2rGyzxjYnZTpqbQELy-_qH&ust=1668543336904000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCIj8h7q-rvsCFQAAAAAdAAAAABAD);
font-family: sans-serif;
padding: 20px;
}
.menu {
max-width: 500px;
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: burlywood;
padding: 10px;
}
what is the problem in here is your link, but here you have a body with an image background, you just change the image for any that you want, make sure that it is the image link or the image path
<!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>Document</title>
</head>
<body>
a
</body>
</html>
<style>
body {
background-image: url(https://th.bing.com/th/id/R.5e6520289b44e11a9e74363c18ce3ee1?rik=0NsMGzWCfTqnyA&riu=http%3a%2f%2fcdn.wallpapersafari.com%2f34%2f38%2ffNuD4F.jpg&ehk=rWygJFVz8poo%2buNiEqsllRqA4jP9BCE6VYuBOMM03GA%3d&risl=&pid=ImgRaw&r=0);
font-family: sans-serif;
padding: 20px;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
/* this is to make the image fits all the screen doesnt matter the image size, but it will cut the image
background-size: cover; */
}
</style>
Add quote " "
.menu {
max-width: 500px;
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: burlywood;
padding: 10px;
}
body{
background: url("https://img.freepik.com/free-photo/vivid-blurred-colorful-background_58702-2545.jpg?w=2000");
font-family: sans-serif;
padding: 20px;
}
The image you want to use, save it locally and you can change the CSS to `background-image: url(image.jpg);
I'm trying to add a background-image to a div at the top of the webpage and i want it to be responsive as well. i got the code for a hero image from w3school and i did it exactly as shown but still the image doesn't show up. i'm 100% sure that the path for the image is correct as i've used it multiple times on the same page and it works just fine. i'll provide all the info below, any hep would be hugely appreciated.
Html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kendrick 🔥</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="body-container">
<div class="navbar">
Kendrick Lamar
</div>
<div class="kendrick"></div>
</body>
</html>
CSS:
#viewport {
width: device-width ;
zoom: 1.0 ;
}
html, body{
height: 100%;
margin: 0;
background-color: #fdfcfa;
}
.body-container {
min-height: 100%;
}
.navbar{
height: auto;
background-color: #1c2120;
}
.navbar a{
color: #FBFBFB;
text-decoration: none;
text-transform: uppercase;
width: auto;
margin: auto;
font-size: 3.5em;
font-family: fantasy;
}
.kendrick {
background-image: url("/images/kendrick!.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
Here's my code. I'm a beginner so please let me know if I have any errors.
I need to have the text resize and move when the browser is scaled. As of now it just stays and doesn't move no matter the size. I've tried a media query's but they haven't worked.
html{
background-image: url(images/CBG1.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
h1{
text-align: -webkit-center;
color: #FF6633;
position: absolute;
margin: 0px;
margin-left: 650px;
margin-top: 314px;
width: auto;
height: auto;
}
<!doctype html>
<html lang="en">
<head>
<title>Hoax Studios</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="uft-8">
<link rel="stylesheet" href="work.css">
</head>
<body>
<div id="container">
<div class="header">
<h1>WORK</h1>
</div>
</div>
</body>
</html>
You need to change the alignment and width for h1 as below
h1 {
color: #FF6633;
position: absolute;
text-align: center;
margin-left: auto;
margin-top: 314px;
width: 100%;
height: auto;
}
What I'm trying to accomplish is on mobile I want my header to have a 3% margin on the left and a 3% margin on the right. I guess you can say what I have done has worked but its creating a side scroll bar.
Here is my code.
\
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic);
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
header {
width: 100%;
height: 64px;
background-color: #ECEFF1;
}
.content {
height: auto;
margin: auto;
width: 1100px;
overflow: hidden;
}
.logo {
float: left;
width: 150px;
height: 40px;
margin-top: 12px;
border-radius: 4px;
background-color: white;
}
.btn {
float: right;
width: 160px;
height: 40px;
margin-top: 12px;
border-radius: 4px;
background-color: #4285f4;
}
#media only screen and (max-width:1110px) {
.header {
width: 100%;
}
.content {
width: 100%;
margin-left: 3%;
margin-right: 3%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="content">
<div class="logo"></div>
<div class="btn"></div>
</div>
</header>
</body>
</html>
I've been dealing with this for quite some time now and can't seem to figure out why the scroll bar is there. I'm sure it's something small and I'm just overlooking it.
Thanks in advance !
Try changing width: 100%; to width: auto; for .content in the media query.
The reason is 100% + 3% + 3% > 100% total width, whereas auto will calculate the available space automatically.
Add the attribute box-sizing:border-box; to your content div and it will fix the problem.
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Link to w3 box sizing explanation: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
I am trying to make a mobile page responsive. But keep running into issues where the page don't show up properly on different devices.
Here is my HTML code :
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width/" >
<title></title>
<link href="css/book.css" rel="stylesheet" />
<style type="text/css">
#page {
background-image: url("images/image-000.jpg");
}
</style>
</head>
<body>
<div id="page">
</div>
</body>
</html>
and here is my CSS code:
body {
background-color: #333;
padding: 0px;
margin:0px;
font-family: Helvetica;
font-size: 14px;
line-height: 1.2;
}
#page {
height: 1024px;
width: 768px;
background-color: #FFF;
position: relative;
/* background-image: url("images/img001.png"); - Set in the page header */
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0px;
}