I just want to position my background images (two images) like in the image 01 and keep it EVER in the same position, even if I resize the windows. The problem is when I tried to resize the windows the images move horizontally towards each other (image 02 and 03). This sucks.
I tried a lot of background properties (all of then I think) and I found a solution using #media queries, but is insane to configure this for all windows size possibilities. Should exist any smart an feasible way to do this.
I really appreciate if someone could give a light on it.
There is no secret on HTML and CSS file, is really simple and I'm putting the prints here to you see.
I can't post images on Stackoverflow yet, so I'm putting links to this images on my G-drive.
Image 01
Image02
Image 03
HTML
CSS
Related
I have searched for a couple hours on this topic, to no avail. When I view my site on mobile via Safari, sometimes pieces of the background image are missing. For instance, everything will look great, but then there will be a chunk missing in the middle. Or, perhaps instead there will be a chunk missing from the bottom. It appears to be random. Then, if I turn the phone, the missing piece fills in and even if I turn it back to portrait mode, the piece has filled in.
Any ideas as to why a section of an image won’t load? Could it be that the image is too big? Just looking for some ideas to get started with. Unfortunately, I haven’t come across this problem in my searches. Thanks.
Images should not be missing chunks. If it is a JPEG image, there is the tiny possibility your image is being corrupted in transit. Is the image being created dynamically?
But the most likely cause is that you have some html element over the top of the image that is opaque - and preventing the underlying image from being displayed.
I am trying to build a deals page which are pulled from amazon.in.I basically go to a deal and copy the image and upload to my server.
But due to different size of the images on amazon.in when I shrink it by 200*200 size for the deal thumbnail, some of the images are getting distorted.
In the below image you can see that the Amazon Basics cable is properly scaled, where as the iphone 7 image is distorted due to the nature of images at amazon.in.
What is the general recommendation for these problems? How do we solve this issue so that I get uniform images for my deals?
If the image does not have an aspect ratio of 1:1 (which is the ratio for your thumbnails) it will get distorted because there's more length in one dimension than the other and if try to match them, one of them will have to be squeezed. That's where the distortion comes from.
The only thing that will work is to give the images a new aspect ratio that matches your template
This can be done with CSS like #SaidbakR mentioned in the comments
Fix the width and place the image in a div with oveflow:none and fixed height to hide the extra height.
This will work beautifully but some images will just not work. They will just be cutoff in the wrong places.
The only other thing you can do is to manually edit the photos in Photoshop or something similar. This can work on all images, but manually editing each and every photo that doesn't fit is a pain in the neck.
nevertheless, here's what you end up with.
Before: Original Image in full dimensions
After: Image edited in a program like Photoshop to the desired size of 200x200 with no distortion
So? My Suggested fix is to adjust your approach/template or find another source for your images.
I have replaced a header logo image which was just text in an arc on the following website: Leeds Magic Circle
Disclaimer: I did not design or create this website I am just performing some small modifications to it.
The original image said "1919 - 2015" and needed updating, hence I chose SVG to replace it with a bit of javascript to update the date portion.
It looks good, however it doesn't scale down when the browser is reduced or viewed on a mobile device.
I need the SVG to fit the 800x116 which replaced the original image, but I need it to scale down too.
I am very new to playing with SVG and the answers on the web are somewhat confusing so hopefully someone here can help.
Also open to alternative methods to achieve this goal.
Thank you
I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.
I have begun developing a webpage, just playing around, and I noticed an issue. I code with my live site on one half of my screen, with my editor on the other. It was all going fine until I extended my web browser fully and noticed that only part of my site was re sizing how I wanted it too. Sadly my site is not live, however I do have a link to the code: http://pastebin.com/yeWzfsBW
In theory, the image (logo) doesn't scale down when I resize the window, it stays the same size no matter what. I attempted to use percentages instead of pixel width/heights however it seemed to have no effect. I will try to pop this live so you can see what I mean exactly.
Fullsized browser: http://imageshack.us/photo/my-images/585/fullsizen.jpg/
windowed mode: imageshack.us/photo/my-images/42/resizedkl.jpg/ (please put in the http:// I couldn't link more then two links in this post)
Hopefully you can see what I mean, i'd like the logo to scale, like the #info css section.
Thanks!
no need to wrap the image in a div.
set width & height in css.
set max width and max height.
there is a challenge with keeping the aspect ratio on the image.
to get started, below is an example using your code. after looking at this you may provide feedback about exactly you are trying to achieve.
http://codepen.io/seraphzz/pen/thGkI