I can't get my hero background image to stop zooming in when I scale the browser width. I want the image to look the same on a desktop/laptop as it does on mobile. I have tried to use object-fit but it doesn't seem to be making any difference, I have also tried setting static width and heights.
can anyone help or point me in the right direction.
Html
<body>
<header id="showcase" class="grid">
<div class="bg-image"></div>
</header>
</body>
CSS
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 1.1em;
line-height: 1.5;
text-align: center;
}
img {
display: block;
width: 100%;
height: auto;
}
h1,
h2,
h3 {
margin: 0;
padding: 1em 0;
}
p {
margin: 0;
padding: 1em 0;
}
#showcase {
min-height: 450px;
}
.bg-image {
position: relative;
background-image: url(girlsmall.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 450px;
}
/* small tablet styles */
#media screen and (min-width: 620px){
}
/* large tablets and laptops */
#media screen and (min-width: 960px){
body{
font-size: 18px;
}
}
/* desktop styles */
#media screen and (min-width: 1200px){
body{
font-size: 20px;
}
}
is that what you want ? i didn't set the picture as a background, but just used the z-index property.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
html, body
{
height: 100%;
margin: 0px;
}
#a
{
position: relative;
height: 100%;
margin-left: auto;
margin-right: auto;
z-index: -1;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
<body>
<img id="a" src="girlsmall.jpg" alt="">
</body>
</html>
Related
I want my background to take up all the space on the ipad views when making my webpage responsive. It works fine for mobile phones but with tablets it cuts off and the image won't take up the entire space. I think it may have something to do with me having one of my media queries set at a max width of 1024px but I don't know I am new to responsive design plus it says I need to type more details. Hopefully all of this makes sense.
<body>
<div class="bg"></div>
<header>
<section class="title">
<div class="title__step2">
<h1 class="title__head">Step 2</h1>
</div>
<div>
<h1>
Choose your City
</h1>
<p>Welcome to Step Number 2! You're almost there, just tell us which city you are interested in moving to and we can make it happen!</p>
</div>
</section>
</header>
</body>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
margin: 0;
background-repeat: no-repeat;
background-size: cover;
height: 95vh;
}
:root {
--main-color: rgba(255, 111, 15, 0.8)
}
.title {
margin-top: 2.5%;
margin-left: 12.5%;
text-align: center;
border: 2px solid black;
width: 75%;
background: var(--main-color);
color: white;
font-family: 'Roboto', sans-serif;
font-size: larger;
}
.title__head {
width: 100%;
margin-top: 0;
padding-top: 7px;
padding-bottom: 7px;
background: white;
color: var(--main-color);
font-family: 'Roboto', sans-serif;
}
#media screen and (max-width: 1024px) {
.bg {
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
width: 100vw;
height: 100vh;
position: fixed;
z-index: -1;
}
.title {
margin-top: 2rem;
margin-left: 1rem;
width: 21.5rem;
}
#cards {
display: flex;
flex-direction: column;
}
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 310px;
height: 200px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 32rem;
width: 21.5rem;
margin-bottom: 4rem;
border: 4px black solid;
margin-left: 1rem;
}
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: inherit;
}
.choice {
margin-top: 0;
margin-left: 2.75rem;
}
#media only screen and (min-width: 660px) and (max-width: 1024px) {
.bg {
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
width: 100vw;
height: 100vh;
position: fixed;
z-index: -1;
}
}
I think I have what you are looking for :
First : Delete your .bg element from your html and css(you won't need it)
Then :
replace :
body {
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
margin: 0;
background-repeat: no-repeat;
background-size: cover;
height: 95vh;
}
with :
html{
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position:center;
height: 100%;
}
body{
margin:0;
padding:0;
}
Here is my code: http://jsfiddle.net/vy6w2tun/1/
<html>
</html>
(1) The text is centered in the page, which is what I want.
(2) However, I would like the image centered (which it is), but I do not want the text to cover the image. I would like the image to go below the text, so that no part of the image is being covered by the text, and vice-versa.
How would I go about doing so?
i deleted position:absolute; and top left values and transform values from p { }. İ added margin:0 auto; (for center) and width:70%; in p {}.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
margin: 0;
padding: 0
}
#font-face {
font-family: HelveticaNeueLTCom-Th;
src: url("HelveticaNeueLTCom-Th.ttf")
}
p {
font-family: HelveticaNeueLTCom-Th;
font-size: 19pt;
letter-spacing: 1.2px;
color: red;
line-height: 1.5;
text-align: justify;
margin:0 auto;
width:70%; /* it's up to you */
}
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.img {
display: grid;
height: 100%
}
.center-fit {
max-width: 100%;
max-height: 90vh;
margin: auto
}
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%
}
}
#media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%
}
}
</style>
</head>
<body>
<div class="fullscreen-bg">
<video loop autoplay muted src="video.mp4" type="video/mp4" class="fullscreen-bg__video"></video>
</div>
<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
<div class="img"> <img class="center-fit" src='https://grcc.net/wp-content/uploads/2015/06/Dogs-for-Rob-1-e1434850228704-1024x695.jpg'></div>
<div class="img"> <img class="center-fit" src='https://picsum.photos/400/300'></div>
<div class="img"> <img class="center-fit" src='https://picsum.photos/400/300'></div>
</body>
</html>
I am trying to make a parallax for the first time and am having troubles.
I'm following this tutorial and then trying to work backwards. The code isn't working however and I'm not sure where I made the mistake, I jumped around to a few other tutorials and tried to adjust the names of different divs and CSS blocks so the code is a bit messy right now.
.html {
height: 100%;
overflow: hidden;
}
.body {
max-width: 30px color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100% overflow-y: scroll;
overflow-x: "Luna"
}
header {
box-sizing: border-box;
min-height: 100vh;
padding 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url(picture1.jpg);
background-size: cover;
transform-origin: center center 0;
transform: tranlasteZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-weight: normal;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
.image1 {
background: url('img/(picture1.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Schade's Parralax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<p>Hi My name is schade I wrote this so I could have a test of my program.</p>
<div class="image1"> </div>
</div>
</body>
</html>
In first use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect.
body,
html {
height: 100%;
}
h1 {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-transform: uppercase;
text-align: center;
font-family: Helvetica;
font-size: 75px;
}
.parallax {
background-image: url('https://images.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 100%;
/* Parallax scrolling effect */
background-attachment: fixed; // Try to remove this property
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 300px;
line-height: 300px;
background: #ededed;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="parallax"></div>
<div class="content">
<h1>content</h1>
</div>
<div class="parallax"></div>
</body>
</html>
Some mobile devices have a problem with background-attachment: fixed. You can use media queries to turn off the parallax effect:
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
More info about fixed property.
I'm trying to learn HTML/CSS and working on a nav bar, however, I am experiencing a scaling problem. This is the website in full screen.
This is the website minimized a bit.
Then this is the website minimized all the way.
As you can tell when I scale the website around into different scales then the proportions mess up and things begin to overlap. I have tried making the children absolute while keeping the containers relative. I am also using em's for measurement and not using pixels. What can I do to keep everything proportional while scaling?
This is the js fiddle
https://jsfiddle.net/2w1r136j/2/
HTML
<div class="container">
<header>
<nav>
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt="logo">
<div class="leftNavContainer">
Home
Story
</div>
<div class="rightNavContainer">
Characters
Create
</div>
</nav>
</header>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #222;
font-size: 1em;
}
.container {
width: 100%;
height: 100%;
position: absolute;
}
header {
background: white;
height: 3.5em;
}
.logo {
height: 4.5em;
width: 4.5em;
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
margin-top: 0;
}
.leftNavContainer {
position: absolute;
float: left;
}
.leftNavContainer a {
position: relative;
display: inline;
margin-right: 2em;
margin-left: 2em;
}
.rightNavContainer {
float: right;
}
.rightNavContainer a {
position: relative;
display: inline;
margin-right: 2em;
margin-left: 2em;
}
Well Media queries might work, but a much better implementation would be using Flexbox or better CSS Grid.
I've updated the fiddle with a flexbox implementation.
https://jsfiddle.net/khpv2azq/3/
HTML
<head>
<title>
Westworld
</title>
<link rel="stylesheet" href="css/style.css">
</head>
<div class="container">
<header>
<nav>
<div class="leftNavContainer">
Home
Story
</div>
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt="logo">
<div class="rightNavContainer">
Characters
Create
</div>
</nav>
</header>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #222;
font-size: 1em;
}
nav{
display: flex;
justify-content: space-between;
}
.container {
width: 100%;
height: 100%;
}
header {
background: white;
height: 3.5em;
}
.logo {
height: 4.5em;
width: 4.5em;
position: absolute;
left: 50%;
margin-left: -50px !important;
/* 50% of your logo width */
display: block;
margin-top: 0;
}
.leftNavContainer {
}
.leftNavContainer a {
position: relative;
display: inline;
margin: 4px;
}
.rightNavContainer {
}
.rightNavContainer a {
position: relative;
display: inline;
margin: 4px;
}
Also MDN resource for Flex box -
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Hope this help! 😇
You can use media queries to change sizes at breakpoints
ex:
#media only screen and (max-width: 600px) {
body {
font-size: .7em;
}
}
https://jsfiddle.net/2w1r136j/7/
However, you might consider using the media queries to incorporate a responsive design which will work for mobile.
A common idiom is to collapse the menu items into full width elements, and to bump up the font size.
something like: https://jsfiddle.net/2w1r136j/40/
As a homework for school I'm creating a website but a div
.container {
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
top: 70vw;
width: 100vw;
} is getting out the window, because of this the h1.titolo {
font-family: musei;
color: #555555;
font-size: 4vw;
text-align: center;
display: block;
margin: 0 auto;
}put inside it makes the h1 and a
form
.map {
display: block;
margin: 0 auto;
} put inside the div aswell, not centered on all resolutions.
Why doesn't the div is a little bit larger instead of taking the excat width of the window even if i wrote 100vw?
Here's the full HTML/CSS code
.immag {
max-width: 100%;
height: auto;
position: absolute;
top: 0px;
left: 0px;
}
.map {
display: block;
margin: 0 auto;
}
.titolo {
font-family: musei;
color: #555555;
font-size: 4vw;
text-align: center;
display: block;
margin: 0 auto;
}
.container {
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
top: 70vw;
width: 100vw;
}
.border {
background-color: #ebebeb;
margin: 0 auto;
width: 300px;
border-style: ridge;
border-color: #00c4ff;
border-width: 1vw;
width: 20vw;
height: auto;
}
#font-face {
font-family: musei;
src: url(font-titolo-musei.otf);
}
html {
overflow-y: scroll;
}
.over {
overflow-y: hidden;
width: 200vw;
}
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico" >
<title>1CE</title>
</head>
<body>
<img src="Senza%20titolo-1.jpg" class="immag">
<div class="container">
<div class="border">
<h1 class="titolo">MUSEI</h1>
</div><br>
<iframe class="map" src="https://mapsengine.google.com/map/embed?mid=zi8GElmpTlNo.kJ3GnRl1X08c" width="640" height="480"></iframe>
</div>
</body>
</html>
Using 100vw will always make the site take up the entire viewport, however a scrollbar is also part of the viewport and will make what is displayed smaller than the actual viewport. using width:100% will solve your problem with the scrollbar being in the way.