I've got a site which although not responsive, should just show a scaled version of the desktop site when viewed on iphone or ipad. The problem is that my main background image is being compressed for some reason. If I resize the browser I can't recreate this issue, so am just struggling to figure out what's going on iOS which is causing it. The site is - any help would be greatly appreciated!
Added info: the issue seems to be with div.bg-main and it's background image settings, set on line 243 of style.css
iOS has a 2 megapixel limit on background images. Your image is 1587*1340 = 2,126,580 pixels - a bit too much. It therefore shrinks it.
You can use the background-size property to fix the size back up to what you’re expecting. You’ll lose some detail but it’ll be the correct size. Add this to your CSS:
.bg-main { -webkit-background-size: 1587px 1340px }
You can chop your big image with 2 parts and add 2 backgrounds to a div.
Like this:
background: url(1.jpg) top center, url(2.jpg) bottom center
That image is huge, maybe that is the issue. Try reducing the size with 'save for web' (try getting the design to work with a .jpg).
Related
I made this single web page and when I view it my mobile device, and I thumb to the left, the width of the website shifts over slightly, like the left and right edges are not completely contained within the device screen. It doesn't shift around on the DuckDuckGo browser, but it does on Safari. Is anyone aware of how to correct this?
I've used Bootstrap Grid and tried to set the correct element width specifications with CSS.
i think it's about the width of you div with the ID "spinningDial".
She's to big on small device.
Remove it for a test. Then the page width will be perfect on mobile device.
Or you can juste try to change the width of this div for a test (100px for example).
Thanks for the help, everyone. I changed the width of the spinning image and everything seems to be working. I had also forgotten that the corners of the transparent div extend further than the circle... whoops.
I'm running into a problem. When I view my website on a computer and phone, it's built perfectly; but, when I pull it up on an iPad, the background images are like blown up. My website is http://www.zwdalpha.com/, any help will be very appreciated! Also, my Github is https://github.com/zcsmouse970/zwdalpha
To address the issue, you first need to understand what is happening. Background image sizes are handled with the background-size attribute, which you currently have set to cover. cover is great for large screens because it makes sure the image "covers" the height of the element. This allows for clipping on the sides to make sure it fills from top to bottom. contain is the opposite of that. It makes sure you can see the entire image at all times. It does this by making sure the width is 100% and the height is left to clip or expand. When you see on tablets and smaller that the images are "blown up", the CSS is making sure that the entire content area is filled with the image, and it does this by making sure the height of the image fills the content pane. Here's where we get a little more detailed.
You have your images setup as fixed. Obviously this was the effect you were going for, but lets think about what needs to happen here. Now the image needs to be covering the screen from top to bottom because it is able to be viewed anywhere the content pane is while being fixed. So now your image is covering the entire viewport. You can see the changes it makes when you change it to background-attachment:scroll;. It instead fits the image into the content pane instead of the viewport.
All of that being said, the way you can change this is by implementing media queries and switching backgrounds to cropped versions that are more appropriate to the viewing dimensions.
Your issue appears to be to do with background-attachment: fixed not behaving as expected.
Try background-attachment: scroll
I have a problem with new images. When I'm uploading a new image it looks like this:
Any suggestions how to fix this ?
I ran into this problem. Every time I added an image into a page, part would be cropped off. I tried playing with the settings > media etc, turned off the Smush plugin, changed the image size and dimensions in photoshop. But part of the image still kept getting trimmed off when uploading. Finally, I uploaded the image directly into Media, where it looked fine. Tried placing it in the page - cut off again. Copied and pasted the image code into the page and it shows up fine. I haven't nailed down the issue, but at least this is a workaround if it is only one or two problematic images.
If your problem is that img is cut at the top or/and at the bottom, you probably have a hard crop in your template.
This might help you
Or, try a work around:
Add a high-quality, max-height image, then you can and scale it up with transform: scale(1.5); in css.
Hope that helps.
If you go to Settings -> Media, you should set width or height to 0. In this way, that dimension will be scaled and nothing is cut off.
If you set width to 0, vertical (height > width) images will be reduced, and horizontal images will be enlarged a bit.
Go to settings > media and you will see your image settings. What is happening is that the image you are uploading is too large and thus it gets cropped. Uncheck Crop thumbnail to exact dimensions (normally thumbnails are proportional), and your images will get scaled rather than cropped.
If this is still no good to you, then you will have to jump into the code that is displaying the images.
I have this photo site that I am noodling with and I have an issue with reactive sizing of the browser window. The images look great at 100%, but when I size down the window the landscape images start to resize, which I understand they are sizing down to meet the width of the browser window.
However when I get really small, to mimic a smartphone, I really want these images to stack, as this makes more sense for images that are portrait. So the idea is to go from left to right and then top to bottom when the browser is small. Im kinda rusty at css and I cant remember how to get this done. Can someone please help a brutha out and point me in the right direction so I can get this going? Im doing this all thru my WP override option, so an approach I should follow with just css would be the best, as Im a tard with anything more complex.
the site is here: http://jadanduffinphotography.com/
Thanks!
-Jadan
What I suggest for you to do is:
write css to make the images float: left; and position: relative;inside a container div
detect the orientation of the browser window
according to the orientation, set the width of the container div
This should make the images display horizontally when possible and make them stack vertically when not.
You should take a look at this too probably.
This is good. Don't know what's actually bothering you with the responsive layout but so far your site works great.
If you still do not want that resize/layout on smaller device do remove/edit between lines #7201 - #7509 on this file http://jadanduffinphotography.com/wp-content/themes/heat/style.css
I have very strange situation and I really can't see why ... and how to overcome that.
So I have to place the backgroung image on web site of size 1920x860.
The image ends differently - like: if it is not extended over the whole window, the corners of the image looks strange.
When I tested this in FF, it does not look ok. I tested this on 22'' monitor (thus resolution 1680x ..).
when I test this in Chrome, the image extends good, the corners of the image are not seen.
BUT: I have two monitors, the second is 23'', thus the resolution is not much different of the first one and if I test this page on Crome, is ok, on FF also.
Then I used firebug tool and try to get the innerWidth of the window.
The 22'' monitor has innerWidth 2124px, the 23'' monitor has 1776px.
I would really appreciate if someone can tell me - why this is happening? If someone could have an idea how to place this image to let it extend well on every monitor ... would be even better.
The point is - that I have to extend image from corner to corner and while testing on my monitors, I cannot be sure that other users will see this as I can see :(
Thanks.
I'll make the comments here ... as all of you are so kind I just tried many different solutions. the point is that the image is not cover for whole background - should be seen and at the bottom should just have some color ...
Now I'm using simple background: url() no-repeat top center ..
if I use -cover- the image is extended - but I needed to extended only vertically. I used JS as well, but is not working ok, as the footer is a part of that bg-image ... and become all wired.
Maybe, I'll just use #media .. to set bigger image for bigger screens (and of course will use bigger image) but also this will work only for a bit bigger screens, if not the design will crash, I think.
Let me google that for you (first result for 'css window background'):
http://css-tricks.com/perfect-full-page-background-image/
In a nutshell:
html {
background: url(bg.jpg) no-repeat center center fixed;
background-size: cover;
}
See also: http://caniuse.com/#search=background-size