0

I have am loading background images using CSS, but the images continue to come in blurry and then focus after a few seconds, how do I solve this issue?

I saw some answers on this question, but it didn't help with my case: How to prevent the background image from getting blurry

What is causing this to occur?

Any help is greatly appreciated

html:

<div class="first-row-container">
  <div id="one-box" class="first-row-styles animation-target"></div>
  <div class="divider"></div>
  <div id="two-box" class="first-row-styles animation-target"></div>
  <div class="divider"></div>
  <div id="three-box" class="first-row-styles animation-target"></div>
  <div class="divider"></div>
  <div id="four-box" class="first-row-styles animation-target"></div>
<div>

css:

#one-box {
  background-image: url("your-brand-here.jpg");
  background-size: 100% 100%;
  image-rendering: -webkit-optimize-contrast;
  border-style: solid;
  border-width: 2px;
  border-color: #7f8c8d;
}

.first-row-container {
  margin-left: 13%;
}
Community
  • 1
  • 1
adamscott
  • 823
  • 1
  • 10
  • 31

1 Answers1

0

It sounds like you might be using a progressive compressed jpg image. This type of compression causes the image to be rendered in multiple passes, with each pass increasing the level of detail of the image.

When your image is quite large, in terms of resolution and/or file size, this can result in noticable increase in image fidelity, which corresponds to the event you're describing. Can you tell me what the resolution and file size of your-brand-here.jpg is?

If this is the case, you can reduce the load time for the image by reducing the resolution (I generally convert images to the exact resolution they will be displayed at), and by reducing the jpeg compression quality.

Hope this helps!

JJWesterkamp
  • 7,559
  • 1
  • 22
  • 28
  • Hey Jeff thanks for the answer. My current file size is 315*218, file size is 45kb, an dpi is 72px/in. Any suggestions on the edits youd make? – adamscott May 21 '16 at 22:05
  • These image properties you mentioned should not be a problem at all, actually. I was assuming you were using a much larger image. Still, you can try to save a new version, and make sure to save it as 'baseline' instead of 'progressive' or 'interlaced'. In photoshop, you can achieve this by unchecking 'progressive' in the save for web dialog box. – JJWesterkamp May 21 '16 at 22:21