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.
Related
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%;
How to well display a background image no matter what the size of the screen is?
Is there a preferred image size to work with?
I'm trying the new CSS3 background size attributes (cover) but I can't get a result that works well with small and big screens. I also tried different media queries but it did not work.
Do I have to create several versions of the image for different screens?
Small screen
Big screen
As you can see, on a big screen, it is like it is zoomed in so it does not display the main part of the picture anymore.
How to fix this?
The image comes from unsplash and I did not resize it.
Thanks for your help.
The problem here is that your background area has an aspect ratio of almost 4:1 which is very wide. The picture however has an aspect ratio of almost 4:3.
This is why it becomes a problem in bigger screens. The picture just isn't wide enough.
There are different solutions to this, you could for example have the picture stretch to fit any width. But that might not be the desired behavior.
This is what I would do:
Demo - try resizing window to see behavior.
div {
width: 100%;
height: 500px;
background-image: url('...');
background-size: cover;
background-position: 50% 50%;
}
The background-size: cover property sets the picture to always fit it's entire width inside the container (though height will be cut off if it doesn't fit).
The background-position: 50% 50% sets the background to always be centered. This way, if the background cuts off, you will still see the center of the picture which is probably the most interesting portion of the picture.
Is there a way to make a website 100% fluid?
As in, fill the background edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes without neccesarily retaining aspect ratio. Images inside divs and font sizes should obviously resize accordingly and maintain the same amount of white space so the page shows exactly the same content in screens from 800x600 to 4K Ultra HD, being the idea to above any kind of vertical scrollbar. Let's forget about mobile and tablets for a moment.
What I have tried for background:
body {
background-image: url(./Si0rPf7.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Which will fit background as long as the aspect ratio of the image is kept, the moment it changes you will see white spaces on both sides. If cover instead of contain, image will get cropped, which is undesirable if we want to show our whole background to everyone, even if we have to stretch it.
Now, for img src I've had half success with two methods:
.image_1 {width: 100%; height: auto;}
and
<img src="img/image_1.jpg" width="100%"/>
None of them seems able to react to both width and height. Looks like you have to choose between one or other.
For font-size I would just use vw and hope for the best.
You want
background-size:100% 100%;
You should look into the flex model: https://philipwalton.github.io/solved-by-flexbox/demos/grids/
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;
}
I have this part of HTML file
<div id="header">
...
</div>
and this part of CSS file
#header {
background: url("img.png");
background-repeat: no-repeat;
background-position: left top;
height: 140px;
margin: 0px auto;
}
The size of img.png is 1290 x 150 pixels. Everything was OK, but after I opened the web in sister's laptop the image is not stretched over all monitor (horizontally). There is about 50 pixels gap from the right.Is there some general solution, so that the web will display same on all monitors?
thank you
It all depends on different screen resolutions useed by different monitors/devices.
You could let the image stretch to the size of the monitor if you use an image tag to display the image, and specify its width and height properties to be 100%, but that will result in a stretched image depending of the device used...
I suggest you to look for some tutorials about centering images while occupying all the avaiable space without blank space, and retaining image proportions at the same time.
your css code will not strech your background immage, it will only not repeat. as far as I know CSS wont even do that (streching an is possibe )