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%;
Related
I'm working on recreating my website and I would like to have images that appear on the size that categorize the sections. I would like these images to be responsive based on the height of the container. For example, if the container is 600px tall I want the image to be 600px tall regardless of the width. Right now I'm using background-size: contain; which works in desktop mode, but after a certain width, the image starts to get shorter in favor of staying the width of the container.
It works fine in desktop mode:
In mobile I get this:
When I want this:
I hope that makes sense. Also bear in mind that this isn't a finished concept so it looks pretty bad as it is even when I "hack" it to work in mobile
You can use media-queries:
#media only screen and (max-width: 600px) {
img {
background-size:cover;
}
}
You can read more about media- queries:https://www.w3schools.com/css/css_rwd_mediaqueries.asp
You can read more about background-size:https://www.w3schools.com/cssref/css3_pr_background-size.asp
One important thing when asking for help is doing your best to explain your problem as best as you can. Things like putting part of the code you have for example could really improve how fast you'd be answered and have your problem solved.
With that said, I'd recommend changing your css to something like the following:
.hero {
width: 100vw;
height: 100vh;
background-image: url(../images/hero.jpg);
background-size: cover;
background-position: center, center;
}
The background-size: cover along with background-position: center will make sure that it displays in the way you want in mobile. Not necessarily exactly that part of the image though, maybe you'll have to work on an image editor.
The width: 100vw and height: 100vh that I used in this example, are the size of the container in which the image is the background, that is also relevant when it comes to how the picture is displayed. vw is viewport width, vh is viewport height. This unit is good for working with responsive displays, as it takes in consideration the screen to determine the size of whatever styling you put it in.
Since this is already working in desktop in the way you want, I'd suggest using a media query so you'd only change the way it's displayed in mobile, for example.
It would be something like
#media only screen and (max-width: 480px) {
.hero {
width: 100vw;
height: 100vh;
background-image: url(../images/hero.jpg);
background-size: cover;
background-position: center, center;
}
}
As suggested in another answer, take a look into media queries to choose which one is appropriate for what you're trying to achieve. You can use many media queries, such as one for mobile, one for tablets and one for desktop.
I have a section on my website that uses a CSS background image. The website is here. You can see where I have the fixed background image in the "Contact" section. Here is the current CSS for the image:
#hs-contact-section {
color: #FFF;
background-image: url(../images/Chapel-interior.jpg);
background-size: cover;
background-attachment: fixed;
overflow: hidden;
}
Interestingly, if I use a browser inspection tool to simulate a mobile-sized window, the image is zoomed correctly.
But, if I access the webpage on an actual mobile device, it looks like this:
Is there something wrong with my CSS? I've tried searching online but haven't found any solutions that have worked.
It is more than likely because you are using a parallax effect which "does not always work on mobile devices."
refer to the note on w3schools
http://www.w3schools.com/howto/howto_css_parallax.asp
edit: if you want to swap our the image or disable the effect you can create a rule in your CSS
//768px is generally the max mobile pixel width
#media screen and (max-width: 768px) {
#yourId {
element: attribute;
}
}
I’m trying to create a site using Wordpress. I created a theme and most of my pages are created using page templates because I wanted to stay away from the blog look.
Everything looked great until I viewed the site on my ipad in portrait mode. I have a huge white space at the bottom of every page. I used Chrome Canary’s developer’s tool but could not find the element that’s causing the whit space.
I’ve been searching forums for days and tried solutions that have helped others with the problem. No luck so far.
I tried using media queries like:
#media only screen and (min-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 1) {
Html,body{
Overflow:hidden;
}
Still have the huge white space at the bottom of every page when I’m in portrait mode on my ipad.
Please help me find the fix for this problem. Here’s a link to my site: http://www.davidsdrift.com/
Thanks for any help.
Remove the two background-size properties from body and add background-size: cover;.
Add this selector
html {
min-height: 100%;
}
Your background should now cover the entire screen regardless of resolution. You may also wish to add background-position: center center; too.
Example
html {
min-height: 100%
}
body {
background: url(images/homePage.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
If your site design has a static height, then any browser that is taller than that height (most mobile browsers, since they're in portrait orientation) will just stop at that point, and not put anything else below. The browser just defaults to "nothing" (i.e. white space) after that.
You could set a simple background color, so that it's not just defaulting to white below your designed area (body {background-color: #CCCCCC;}), or try something fancier than that.
Or, (gulp) you could totally re-jigger the site to not use a static rectangular design.
It depends if you want to put image to fill 100% your height just add
background-size: 100% 100%;
Else if you want to fill content use percentage not pixels for full height
To add to Joe's answer: The reason why you are seeing white space on the ipad in portrait mode is because of the aspect ratio and orientation of your background image.
There are countless fixes for this, however they all depend on what you would like to do with that extra white space. You could enlarge your background to cover the whole space, repeat the background, use CSS3 properties to create a mirror effect, etc.
Assuming you just want the background to take up the whole space when in portrait mode use this:
#media (orientation:portrait){
html{ min-height:100% }
body {
background:url(images/homePage.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center center
}
}
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;
}
Here are the full width banners which cause this issue. Im using a Plugin which enables you to upload a certain Image and set it up with a specific ID. So I Uploaded a jpeg with 2000px width and 600px height. Then I assigned the following CSS:
#bannerPages {
height: 296px;
margin-top: 183px;
width: 100%;
}
The banners look good on full screen, but they squish while down scaling the browser width. So I'd like to prevent the squishing effect and cutt the image while down scaling the browser size. How could I achieve this?
Looks like you have a media query that is making the width 140px !important.
Try changing the img on the media query to this
img {
width: 100%;
height: auto;
}
I played around with this for a while, but ultimately came up with two solutions depending on your needs. The first is easier to implement and more accurate to your requirements.
Remove the image from the bannerHome element and add the following code to the CSS.
.bannerHome {
background-image: url('http://www.gonpires.com/carmacks/wp-content/uploads/useful_banner_manager_banners/6-homeJV.jpg');
background-position: center center;
background-size: cover;
height: 890px
}
http://jsfiddle.net/9sqjs/2/
That method will only work in IE9+, Firefox Chrome, etc. Nice solution if you don't need IE8 support. You'll have to adjust your media queries as well. The other method requires more work and wouldn't crop the sides but it would fit and resize the image inside a 100% width container which would be cross-browser.
http://jsfiddle.net/Q64S2/1/
Have you tried making the image a background image instead?
For the .useful_banner_manager_banner classed div, you can set that large background-image so it'll essentially crop itself based on screen size.