I made a hotspot login site that has to work for devices with smaller resolutions / screens so my background has to scale with it. Now the problem is that is scales, but it sticks to the top of the screen. So when the resolution gets too small, there is a white void beneath the image. This is what is looks like: https://imgur.com/a/0jAprjJ
This is my CSS code for the background styling:
background-image: url("img/AngelntrÃĪgtGelb.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
What you can do is a media query for screen sizes less than, wherever it breaks and use this for your image size:
#media only screen and (max-width: 600px) {
body {
background-size: auto 100vh;
background-position: center;
}
}
Related
I have this background image. Its working fine and fills up the entire screen vertically on desktop and tablet correctly. When it gets to mobile however it starts to scaled down a bit and shoe these nasty white bars.
Here is the css:
html {
/* The image used */
background-image: url("../../assets/imgs/MenuBackground1.png");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Try changing background-size to 100%
I only want to add an image (size 1920x1080) in my html for my 1920x1080 screen. The thing is that if I see my web in full screen (F11) it works perfect, but if I see it normally (with the OS' window, browser's bookmarks, etc.) it cuts the image's height. The CSS code used is the following:
html,body{
margin:0;
padding:0;
height:100%;
overflow: hidden;
background-image: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Is there any way to get the image perfectly without full screen? Or to know how much height it takes my window and browser? Because, if not, then other people with the same monitor screen size, but with different browsers and OS, could have different results.
background-size: auto auto;
This will preserve the original size (and will be clipped at the edge). "Cover" always resizes the image to cover the container.
Alternatively, you can check the user's screen size and resize the background accordingly.
html, body {
background-size: auto auto;
}
#media only screen and (max-height: 720px) {
html, body {
background size: 1280px 720px;
}
}
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
}
}
etc.
You can also give the container a "min-height" or a "min-width" in css so the picture won't be cut even if the screen size a bit smaller than what you specified.
Example:
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
min-width: 800px;
min-height: 480px;
}
}
I check different webs to see the effect I described. In all I found there is a cropping effect because of the window of the browser (in the height of the image). Instead of full 1080px height we usually see images cropped in height. So I guess that it is inevitable to crop it a little bit if we don't visit the web in full-screen.
One mini-solution is to decide where should crop it (background-position: center top; crops the bottom part). Other is to make the web with a margin at top (not advised for people visiting with other methods: mobile, full screen, etc.)
The style that maybe can do what you want is background-size: auto 100%;, so it take the height of the browser to the size of the background, maintaining the proportion width.
Try to use this styles, so the image height is always the height of your browser. The bad part is that the image if it doesn't have a big width, it can have white lines at the sides.
html {
height: 100%;
background: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
}
I have a website on github pages, which works perfectly on any desktop browser. However, two of my background images will not show up on mobile devices (I've only tested iPad and iPhone, it could just be IOS). I have tried adding media queries to make sure the background-attachment property is set to scroll on handheld devices (I had read this was sometimes the problem). I also have media queries that ensure the images are not too large to load. Here is my html:
<div id="image-1" class="background-image"></div>
<div id="image-2" class="background-image"></div>
Here's the css:
#image-1 {
background-image: url('imgs/coding.jpg');
}
#image-2 {
background-image: url("imgs/game.JPG");
}
#media only screen and (min-width: 500px) {
/* For mobile phones: */
#image-1 {
background-image: url("imgs/coding-large.jpg");
}
#image-2 {
background-image: url("imgs/game-large.jpg");
}
}
#media not handheld {
.background-image {
background-attachment: fixed;
}
}
.background-image {
opacity: 0.8;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 100% 100vh;
height: 85vh;
}
If I change 100vh to 100%, then the images load, but they are terribly stretched vertically. Any suggestions?
You can either:
use a fixed position, with a background position center center: see "CSS background-size: cover replacement for Mobile Safari".
This page refers to a background-attachment: fixed; as well, while remining use that viewport values (such as vh and vw) are technically supported on iOS 7 but simply do not work, hence the rodneyrehm/viewport-units-buggyfill project.
or (less elegant), use fixed size for media with a given size: see "Background image not displayed properly on iPad and iPhone"
Seems iPhones disregard #media rules for handheld devices (See here Do iPhone / Android browsers support CSS #media handheld?
). And giving background-size property of 100% 100% will make the image stretched if the image is not square.
So you can use max-width media query to detect mobile devices and set background-attachment as scroll. And either use background-size: cover or background-size: 100% auto
It looks like you have competing heights with your background-size attribute and your background height attribute. Check out CSS-Trick's post on background-sizes for a better implementation. Since it looks like you want to cover the width of the page with the images, go with background-size:cover instead. Hope this helps.
Use this
/* Image is centered vertically and horizontally at all times */
background-position: center center;
/* Image doesn't repeat */
background-repeat: no-repeat;
/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;
/* This is what makes the background image rescale based on its container's size */
background-size: cover;
So on smaller screens, my current headers I have managed to get down to the size I want using the #media css styling for responsive. But as the image in my headers is a background image, it repeats when I shrink it down. I tried switching it to cover, but the image switches back to being full size, so only shows a small snippet of the image instead.. Here is the code I am looking at;
Page - http://outsidetheline.co.uk/01.html
(Focusing on the top image header container)
HTML:
<section class="meta-wrapper parallax" style="background-image: url('content/single_blog_bg.png');" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20">
<div id="page_header" class="mini-padding">
<div class="container-fluid">
</div>
</div><!-- end page_header -->
</section><!-- end section -->
CSS;
#media only screen and (max-width: 767px)
.parallax {
position: relative;
background-attachment: fixed;
background-position: center;
background-size: contain;
}
#media only screen and (max-width: 767px)
#page_header .container-fluid {
padding: 20rem 0 0;
}
The background image css is coming from element-style.
I tried a few things, such as margin:auto, cover rather than contain etc but it results in the image showing huge rather than nicely fitted.
Use background-repeat: no-repeat:
#media only screen and (max-width: 767px)
.parallax {
position: relative;
background-attachment: fixed;
background-size: contain;
background-repeat: no-repeat;
}
You need:
background-repeat: no-repeat;
http://graduateland.com/
How do i prevent the images from compression. When I reduce the size of my browser window, the image get compressed side way, it's like the human head being compressed.
Looking at that website as an example, the image size isnt affected when screen size changes, only the position of the image changes. How do i do that?
Current CSS
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
If you want images to be resized when the window shrinks, just change height: 500px to height: auto in the CSS you posted. This will force images to keep their original ratio as the width changes. The way your code works right now is that it resizes the image horizontally so it is never wider than its container, but has a fixed height, which messes up the aspect ratio once it begins to shrink horizontally.
If you want the image to stay the same size and just move position as the browser window shrinks you need to apply them as a background-image. Try this CSS code on the container div you want to apply the image background to:
#container {
background: url(path/to/image.jpg) no-repeat center top;
}
On the site you linked they are appyling this CSS
display: table;
width: 100%;
height: 100%;
margin-top: 0;
padding-bottom: 0;
background-image: url("a/image.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
onto a div. But there are great inspector tools which can inspect that for you, so don't ask if you have a 'living' example.
You should particularly have a look at the background properties.
Here's the answer:
Responsive Images with CSS
CSS:
max-width:100% !important;
height:auto;
display:block;
Use #media, like:
#media screen and (max-width: 1280px) and (max-height: 1024px) {
.splash {
background-image: url('../img/splash-1280.jpg');
}
}
#media screen and (min-width: 1281px) and (max-width: 1920px) and (max-height: 960px) {
.splash {
background-image: url('../img/splash-1920.jpg');
}
}
In their CSS:
#media (max-width: 1280px)
[id="get-started"] {
background-size: auto;
background-position: center top;
}
Which overrides:
background-position: center center;
background-size: 100%;