I have a background image assigned via background: url(""); to the body element. Now, its a really huge image and I want to focus the view exactly on the middle.
To understand what I want to do, imagine the following: Open an image on a touch-screen device like an iPhone or any Android phone. Now, pinch to zoom in to the center of the image, and imagine that each zoom-level is a different viewport of another device.
I want a specific part of my image to always be in the center. So far, I have tried tried to use background-{size,attachment,position} but couldn't get it right at all.
My current example is at http://dev.dragonsinn.tk - and the CSS is here: http://dev.dragonsinn.tk/themes/dragonsinn/css/main.ws.php
The current image is 1920x1080, so on most screens it will center almost correctly. But my local one is 1024x786 - which looks horrible so far...
What is the needed CSS, to even make an undersized image center? I can use media queries to make it bigger later. For now, I just want to really center it.
The following centres your image and scales it for different viewports.
See this link for more info on the background-size css property.
Also see http://caniuse.com/#feat=background-img-opts for browser support.
body {
background: url("/cdn/theme/images/bg.jpg");
background-color: black;
color: white;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}
Related
I am trying to make the webpage, and I have trouble setting the background image of the webpage. I want my background image to be one full page without cropping or zooming the image or requiring scrolling.
I have my background image with the size of 1920x1080. I thought this size should make the webpage to be one full page, but it did not. What should I do for the image to fit on one page?
background-image: url('image/background1-1.png');
width: 100%;
height: 100vh;
This code is what I have done for the background image, but it crops the image.
Also, I am following the size or location of the images from the design that I did in XD. However, it does not match if I apply it as a code. For example, according to XD, the location of the text is top: 328px; left: 786px, but if I apply this information to my code, the text does not appear where the text is supposed to appear.
I am struggling with these questions.
I would appreciate your help as I do not have much knowledge regarding this topic.
You're looking for the background-size property. If you truly don't want to crop the image at all, use contain, but this will likely not feel like a true background image. cover will enlarge the image just enough to fit within the bounds of the browser window's dimensions, and will crop it slightly when the browser's w/h ratio isn't identical to your images w/h ratio.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
background-image: url('image/background1-1.png');
background-color: #000;
background-position:center center;
background-repeat; no-repeat;
background-size: cover; /* contain */
width: 100%;
height: 100vh;
you can add this
background-image: "url(/meals/3.jpg)",
background-position: "center",
background-repeat: "no-repeat",
background-size: "cover",
I've been working on my portfolio site (check it out at www.imkev.in) and I'm having some trouble with the mobile version. I've got media queries in my CSS that should switch to a lower filesize and differently cropped image at any screen width below 530pxs. There are other elements of the page (My multi column layout switching to a single column layout) that should similarly switch to a different page layout at lower screen widths and they do, so I know my basic media query is working.
However, the background images elements do not. They stay on the larger file and don't scale the image down to fit the browser window. Again, I'm only have this problem on actual mobile devices.
When I reduce the browser window size on my desktop to below 530px it will switch over to the alternate images and the mobile device emulators I've been able to find online (Chrome developer tools and other browser based ones) all seem to work like they're supposed to.
Here's the CSS I'm using:
.portfolio-background {
background: url(/assets/images/background1-small.jpg) fixed;
background-size: cover;
#media (min-width: 530px) {
.portfolio-background {
background: url(/assets/images/background1.jpg) fixed;
background-size: 100% 100%;
}
}
I've also tried tweaking the background-size to be "cover" on the smaller media query with the same result. I also have this at the top of my html file which should set the width of the browser window to be the width of the device being used:
<meta name="viewport" content="width=device-width, initial-scale=1">
Any suggestions?
EDIT: I'm using a complier and I originally gave the code before my compiler did it's magic. I've adjusted the post to show the actual code output. Still trying to solve the problem
The background images are swapping correctly on your site, I think the issue is that are you not seeing the result you want because of the size and format of your mobile background, and your CSS rules.
The code on your site is slightly differt than what you posted, so I'll use that as an example.
First, try something like this for your mobile background:
body {
background: url(/assets/images/background1-small.jpg) fixed;
background-size: 100% auto;
background-repeat: no-repeat;
}
I think you'll find that it's close to what you're after, but that it doesn't extend low enough at some viewports. The solution to this second point is to prepare another background image which is taller.
Update
It seems like there has to be a better way to cover all the potential
screen sizes than having a different background image for all of them.
How do you get a responsive background image for mobile?
Background on mobile can be tricky because the format of the elements can change radically from their format on desktop.
try preparing your mobile backround image so that its proportions are similar to the proportions on the element you want to cover on mobile
sometimes you can us a background color in addition to your background image.
if you can live with some of your background image not showing, then the use of background-position can help a lot. eg, if the center of interest is in the middle of your image, then css like the following will center your background image in the middle on your element
element {
background: url(/assets/images/background1-small.jpg) fixed;
background-size: initial;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Good luck!
Consider the following link: https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
You are using the wrong media query. Instead change min to max. What this means then is that the maximum width is the one specified. So every decide whose width is less than or equal to 530px will use the styles you have specified.
This has to be:
.portfolio-background {
background: url(/assets/images/background1-small.jpg) fixed;
background-size: cover;
}
#media (min-width: 530px) {
.portfolio-background {
background: url(/assets/images/background1.jpg) fixed;
background-size: 100% 100%;
}
}
i.e. first the regular rules, then the media query, inside that the same selectors with the rules containing those parameters which differ from the regular rules.
background-size: cover;
Should be:
background-size: 100% 100%;
I am having trouble keeping a consistent Background image height on a div across multiple devices, I am using Chrome's DevTools to preview the outcome on different devices based on their width. Let me explain further.
I have a div with the following class...
.header-image {
width: 100%;
height: 57%;
background: url('img/fruit-water.jpg') lightgrey;
background-size: 100%;
display: block;
}
This displays perfectly fine on the normal computer viewport, the height: 57%; property displays the perfect amount of the background image that I need. But when I change the view onto another device it doesn't display the same amount of the image that it initially did, it only shows about 20% of the image.
Does anyone know a way to keep the amount of the image displayed consistent, even with the width value changing?
I can't use Jquery or any plugins as the page is an AMP page and validates according to the AMP rules set by google.
https://jsfiddle.net/pre6L7d9/1 <-- Fiddle, Please look into it
Thanks in advance.
as #severinolorillajr said you can use:
background-size:cover;
and if you want to center it to the top you can use:
background-size: cover;
background-position:50% 0%;
EDIT:
Sorry i cannot answer the other question,
if you want to use a % height like 57% you need to set the image position:absolute;
Or you can use:
height:57vh;
That will do the trick!
EDIT2:
maybe you need to mantain the image scale, then you need to set it to:
height:57vw;
.header-image {
background: url('img/fruit-water.jpg') no-repeat center center fixed;
background-size: cover;
}
Check this for other CSS Implementation
So I've seen other people posting about similar problems and I've tried their solutions but none of them have worked.
On desktop, the header background image works perfectly. Even when I resize the window to that of a mobile size, it works. But when I load it on an actual mobile device, the background image doesn't show up. I've discovered that if I remove the background-position: center center;, the background image does show up on mobile, but it's distorted.
So, my question is: how can I make the background image show up on mobile without it looking distorted.
My CSS for the header container in question is:
header {
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-image: url(../img/header-background.jpg);
position: relative;
}
You can see it in action at: http://coledavidson103.github.io/davidsoncreative/.
Again, the problem only presents itself on a mobile device. It doesn't even happen when I use Inspector to emulate a mobile device.
Thanks in advance!
EDIT:
Here is a screenshot of the problem when I include background-position: center center. You'll notice that the image doesn't show up.
Here is a screenshot of the problem with background-position is not included. You'll notice the image is distorted.
change background-size: cover to background-size:100% 100%.
i have a problem with the images of my slider in the header. Please take a look at the page.
When the screen resolution is too high, the images are getting cut off. Please focus on the first two images. You can test different screen resolutions here. The images look good until 20" Desktop (1600 x 900). When you test 23" Desktop (1920 x 1080), you won't be able to see the bottom of the first and the second car.
Any idea how I could fix it?
If you don't mind SEO for the images, there is another way to display them. Set them as a background-image on .item elements. And remove img tags. Then in css set something like this:
.item {
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
height: 100px;
}
You need to provide a height to elements, so change it to whatever.