0

With JavaScript, the element is assigned to var a. If I simply assign its style background to an image (most images) as such: a.style = 'background:url(image.jpg)';, the image's width and length will adjust perfectly to fit that of the div element's by default.

One particular issue though: I've snapped a quick pic with my phone (.jpg) and downloaded it on my pc and assigned its url value to the div element's background. It however does not adjust its width and height to that of the div element's.

Why is this? and how do I correct this issue?

Thanks in advance.

jhpratt
  • 6,841
  • 16
  • 40
  • 50
Scott Miller
  • 57
  • 4
  • 1
    there isn't enough information to know what might be affecting your element. It is possible for multiple CSS rules to apply to an element, and any of these CSS rules could cause the symptoms you are seeing. On that note, this isn't really a JavaScript question, it's an HTML/CSS question. – Claies Feb 03 '18 at 00:29
  • Possible duplicate of [Set size on background image with CSS?](https://stackoverflow.com/questions/1341358/set-size-on-background-image-with-css) – Heretic Monkey Feb 03 '18 at 00:40
  • use `background-size:100% 100%` – Temani Afif Feb 03 '18 at 07:45

1 Answers1

0

To control the size of the background-image, you can use the background-size property.

To ensure the image stays within the constraints of the div, you would use "contain"

background-size: contain;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

posit labs
  • 8,951
  • 4
  • 36
  • 66
  • while it fits in the div, it repeats a portion of it – Scott Miller Feb 03 '18 at 01:05
  • in response to that I've edited the background property as such: `a.style = background:url("image.jpg") no-repeat';`, and as a result, the said repeated portion is now white space. – Scott Miller Feb 03 '18 at 01:12