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;
}
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);
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;
}
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;
}
Why does the div of the class .topcontainer not show when height:50% (which I assume should take up half of the page) but does when set to 500px? I'm trying to create a responsive page and I'm new to css/html.
Below is height:50%
#import url('https://fonts.googleapis.com/css?family=Roboto');
#import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
font-family: "Roboto", sans-serif;
margin: 0px;
background-color: #AA3939;
}
div.container {
width: 100%;
height: 100%;
position: relative;
}
div.topcontainer {
background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg");
background-repeat: no-repeat;
background-size: cover;
position:relative;
width: 100%;
height: 50%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mobile.css">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="masonScript.js"></script>-->
<title>majic.photography</title>
</head>
<body>
<div class="container">
<div class="topcontainer">
</div>
</div>
</body>
</html>
This just shows the blank background.
And below this is height:500px.
#import url('https://fonts.googleapis.com/css?family=Roboto');
#import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
font-family: "Roboto", sans-serif;
margin: 0px;
background-color: #AA3939;
}
div.container {
width: 100%;
height: 100%;
position: relative;
}
div.topcontainer {
background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg");
background-repeat: no-repeat;
background-size: cover;
position:relative;
width: 100%;
height: 500px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mobile.css">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="masonScript.js"></script>-->
<title>majic.photography</title>
</head>
<body>
<div class="container">
<div class="topcontainer">
</div>
</div>
</body>
</html>
This shows the container, but is not responsive and not good on mobile displays.
Thanks in advance!
Try this!
The idea is to place your HTML and body at 100% height then you can use percentage in height.
#import url('https://fonts.googleapis.com/css?family=Roboto');
#import url('https://fonts.googleapis.com/css?family=Slabo+27px');
html,body{width:100%; height:100%;}
body {
font-family: "Roboto", sans-serif;
margin: 0px;
background-color: #AA3939;
}
div.container {
width: 100%;
height: 100%;
position: relative;
}
div.topcontainer {
background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg");
background-repeat: no-repeat;
background-size: cover;
position:relative;
width: 100%;
height: 50%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mobile.css">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="masonScript.js"></script>-->
<title>majic.photography</title>
</head>
<body>
<div class="container">
<div class="topcontainer">
</div>
</div>
</body>
</html>
Cheers
In case you just want the topcontainer to be 50% of your browser's height you could just use
height: 50vh;
instead of 50%. 50vh will make your topcontainer 50% of your browser window's height.
In addition to that you could add a min-height value of 500px for smaller windows.