Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a website with a background image, choosen by random with javascript:
document.body.style.background= 'url('+randombgs[num]+')';
I have set the background to an imagefrom the randombgs[] array which contains 15 backgrounds. But the background gets cut off, and the whole image isn't displayed (see picture below)
This is what I see:
This is what I should see
How can I fix this, so my browser shows the whole image and not 95% of it?
Use CSS background-size property:
body {
background-size: contain;
}
The image will fit your container.
You can use the background-size property in CSS (with value contain).
See http://www.w3schools.com/cssref/css3_pr_background-size.asp for more details.
Not supported on IE8 and less: http://caniuse.com/#feat=background-img-opts only.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 months ago.
Improve this question
I have the following example where I use same styling of an image, and on a div.
The point is the property on a div makes the image looks way better, yet on the image makes the image distorted. what is the deal here? I am using the same styling for both yet somehow, it is not being applied as it should.
Code sand box example
We see that the image is being squished to fit the container. For fix this you must set property "object-fit: cover;".
When style is set directly on <img>:
You set fixed dimensions that does not match with actual image and it disproportion your image
Any background* property does not work, as image is not as background
When style is set directly on <div>:
You set fixed dimensions for container, not image.
Background image then can extend beyond container and is not in dispropotion
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 months ago.
Improve this question
I have the problem that my email template is displayed differently on different mobile devices.
The textbox is sometimes centered, but should always be left aligned.
Does anyone have an idea what this could be and how I can solve the problem?
How it should be on every devise:
enter image description here
How it it (sometimes):
enter image description here
Try this in your style.css file:
.yourClass{
justify-content:start;
}
Have a nice day,
Angélique.
You could try to use a media-query at the specific resolutions that look different and apply different css rules to ensure it stays left aligned. e.g.
#media (max-width: 1024px) {
.cssClass {
}
}
As for the reason, some screens have different pixel ratios, and therefore the padding or other values sometimes change.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
For some reason when I'm shrinking the size of the windows, there is a gap on the right edge of the website, showing the background.
It gets worse when I'm shrinking it more. Any ideas on how to fix that? I have some absolute elements, maybe that's why?
Another thing is that it gave me an idea to deliberately make those gaps but on both sides, showing the page background, how to do it?
Thanks alot for reading and helping.
body{
background-image: url("img_name.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
or try to set margin to auto or set the max-width.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am working on a web based mapping thing. I tried to display an SVG World Map, but it is only showing just over half of what I want it to.
You can see what I mean here:
And I am using this code to display it:
var img = new Image();
img.src = "https://trevorc.ca/maps/map.svg";
mapcan.drawImage(img,-26361054,-16656750,26361054*2.2,16656750*2);
I have double checked the size. I am almost certain it is correct. I have even changed it to see. When I did that it stretched the image but was cut off at the same spot, and I am sure the file is not just cut off there.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This image explains what I want:
Of course I could achieve this in photoshop, but I want it to work for infinite width, so that's why I'd like to be able to achieve this via css or javascript.
How can this be done?
Open your image editor.
Crop the image to the 1px you want.
Insert as background-image and style with repeat-X.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-repeaty
EDIT 1
Based on the following answer:
put background image in center and repeat last pixel to left and right
You could try the border-image-source style.