Left side image is Desktop screenshot and the right side image is Mobile screenshot. See the right side screenshot, image icons showing blurry. Can you please tell me what's the solution for it?
Please note, I have also tried the following solution. But, don't working.
background image looks terrible on mobile
Please use an image with high resolution and quality.
The image you are using is ~ 10kb ...use image bigger image for this, you have to save your image with high dpi .
For mare details please refer this https://en.wikipedia.org/wiki/Dots_per_inch
Related
I have search all over the internet and tried for hours to resolve the issue with no avail!
Visit http://testdrupal.ml/node/126 on your mobile device or from your desktop but with resized window to any size... and you will notice a black background will show up at the right side of the screen.
I have tried for hours to play with css and yet the problem not solved!
Can someone please point me to the right css style to be used in order to make this black background disappear ?
Using:
Drupal 8.6.10
Default Bartik theme
An image showing the black background
I want to provide the full css code but the project is private and I can only provide full information with website access in a private chat... I hope someone will be interested!
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 am currently facing full screen images blurry issue, no matter what size i changed for my background image (tried 1800px, 1600px), it came out same blurry issue. Been searching google but still cant find result. hope someone can solve. thx
For your info, i'm using "save for web" in photoshop. My web is (http://maxgohblog.blogspot.com/)
If you wan't the images to appear in better quality you have to take a higher resolution. Basicly your image was blewn up from 800px width to 1400px, if you inspect it in your Developer Tools. It's lika a bowl of 800 beans but you need 1400 of them to be full.
I am trying to match an html video to a css fullscreen background that is centered in the screen. I want the video to seamlessly match the background no matter what size the screen is. Please help all you master css guys and gals. Thanks!
the image is at:
Screenshot of video and background
Try to take a look at the codde in this fantistic site, where the video also is integrated with a map, where you are ind the Video.
http://nrk.no/nordlandsbanen/
Cheers
JanCoyle
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).