The CSS background seems to be malfunctioning in Chrome

Question

The CSS background seems to be malfunctioning in Chrome

Could you please explain why this HTML and CSS code works on FF, IE9, jsfiddle, but not on the live site using Google Chrome?

HTML:

<p>
    <a href="http://tambnguyen.com/wp-content/uploads/2012/05/256501557_1280.jpg">
        <span class="img_wrapper">
            <img class="tn" src="http://tambnguyen.com/wp-content/uploads/2012/05/256501557_1280-580x326.jpg"/>
        </span>
    </a>
</p>

CSS:

img.with-borders, img.tn { 
    margin: 5px 0 0 0;
    padding: 8px;
    background: #f1f1f1;
    border: solid #777;
    border-width: 1px 2px 2px 1px;
    box-shadow: 0 15px 15px -15px rgba(0, 0, 0, 0.9);
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
span.img_wrapper {
    background: url('http://tambnguyen.com/wp-content/themes/Polished/images/et-image-sliderleft-shadow2.png') no-repeat left bottom, url('http://tambnguyen.com/wp-content/themes/Polished/images/et-image-sliderright-shadow2.png') no-repeat right bottom;
    padding-bottom: 14px;
}
img.with-borders:hover, img.tn:hover, img.post_img:hover, div.related_post_thumb:hover  { 
    border-color: #000;
    filter: alpha(opacity=80);
    opacity: 0.80;
}

The jsfiddle link is available here http://jsfiddle.net/gNtea/, and the live site can be accessed at

Thank you!

html css google-chrome background

Answer 1

Answer №1

To achieve the desired layout, make sure to include display: inline-block; in the CSS for the img_wrapper element, as shown below:

span.img_wrapper {
  display: inline-block;
  background: url('https://example.com/image-left.png') no-repeat left bottom, url('https://example.com/image-right.png') no-repeat right bottom;
  padding-bottom: 10px;
}

Answer 2

To achieve the desired layout, make sure to include display: inline-block; in the CSS for the img_wrapper element, as shown below:

span.img_wrapper {
  display: inline-block;
  background: url('https://example.com/image-left.png') no-repeat left bottom, url('https://example.com/image-right.png') no-repeat right bottom;
  padding-bottom: 10px;
}

Answer 3

Answer №2

Upon reviewing both the jsFiddle link and the live website in Chrome, I noticed that the current use of the display:inline-block; property is causing a visible gap between the background shadow images and the Social Buttons.

The issue arises due to the use of inline-block. To address this, I recommend refraining from using display:inline-block; and instead defining specific padding values for top, right, bottom, and left.

In addition, given that objects are floated on your live webpage, assigning a value of 1px to padding-right can help resolve the spacing problem.

You have two possible methods to choose from:

Method 1 - Shorthand padding (top, right, bottom, left):

padding: 0 1px 18px 0;

Method 2 - Specifying missing padding-right value:

padding-bottom: 18px;
padding-right: 1px;

Implementing either of these approaches will enable you to display the Poster Image with its background images intact without disrupting the layout of the webpage and eliminating the noticeable gap.

It's crucial to understand why the fix works differently on jsFiddle compared to the live website. The reason lies in the fact that jsFiddle serves as a sandbox environment which may not always replicate real-world scenarios accurately – essentially attributing this discrepancy to a potential bug within jsFiddle.

To demonstrate this behavior, I've included a jsFiddle example showcasing your HTML content directly copied into the platform for comparison.

If you utilize Chrome developer tools (press F12 on the keyboard) to inspect the image element and navigate to the relevant span tag, you can experiment by toggling off the style for display:inline-block;. This exercise reveals a minor pixel adjustment in Chrome when viewing the .png images, emphasizing their continued visibility.

In conclusion, while recognizing the utility of jsFiddle as a valuable testing tool, it's imperative to rely primarily on web browsers such as Chrome – or any chosen browser – to finalize the page design for production purposes, ensuring seamless compatibility across different interfaces.

Reference Photo 1: display:inline-block

Reference Photo 2: padding-right: 1px;

Answer 4

Upon reviewing both the jsFiddle link and the live website in Chrome, I noticed that the current use of the display:inline-block; property is causing a visible gap between the background shadow images and the Social Buttons.

The issue arises due to the use of inline-block. To address this, I recommend refraining from using display:inline-block; and instead defining specific padding values for top, right, bottom, and left.

In addition, given that objects are floated on your live webpage, assigning a value of 1px to padding-right can help resolve the spacing problem.

You have two possible methods to choose from:

Method 1 - Shorthand padding (top, right, bottom, left):

padding: 0 1px 18px 0;

Method 2 - Specifying missing padding-right value:

padding-bottom: 18px;
padding-right: 1px;

Implementing either of these approaches will enable you to display the Poster Image with its background images intact without disrupting the layout of the webpage and eliminating the noticeable gap.

It's crucial to understand why the fix works differently on jsFiddle compared to the live website. The reason lies in the fact that jsFiddle serves as a sandbox environment which may not always replicate real-world scenarios accurately – essentially attributing this discrepancy to a potential bug within jsFiddle.

To demonstrate this behavior, I've included a jsFiddle example showcasing your HTML content directly copied into the platform for comparison.

If you utilize Chrome developer tools (press F12 on the keyboard) to inspect the image element and navigate to the relevant span tag, you can experiment by toggling off the style for display:inline-block;. This exercise reveals a minor pixel adjustment in Chrome when viewing the .png images, emphasizing their continued visibility.

In conclusion, while recognizing the utility of jsFiddle as a valuable testing tool, it's imperative to rely primarily on web browsers such as Chrome – or any chosen browser – to finalize the page design for production purposes, ensuring seamless compatibility across different interfaces.

Reference Photo 1: display:inline-block

Reference Photo 2: padding-right: 1px;

Answer 5

Answer №3

Just remember to adjust the height of the image =)

li.current-menu-item a {
background: url("../images/bg_menu.png") repeat-x;    
height: 35px;
}

Answer 6

Just remember to adjust the height of the image =)

li.current-menu-item a {
background: url("../images/bg_menu.png") repeat-x;    
height: 35px;
}

Answer 7

Answer №4

Encountering the same issue with Chrome led me to a bizarre solution

In the body wrapper, my original CSS code looked like this

background-image: url(../../img/layout/bgOutside-rtl.jpg);

The image ended up repeating, which was not ideal. Despite trying various solutions found elsewhere, things only seemed to get worse.

To address this, I made the following adjustment

background-image: url(../../img/layout/bgOutside-rtl.jpg);
background-repeat: no-repeat;

Although PHPStorm recommended a different approach

background: url(../../img/layout/bgOutside-rtl.jpg) no-repeat;

This change seemed logical but unfortunately didn't resolve the issue. Instead, Chrome interpreted it as an instruction to not display any image at all.

The only solution that worked for me was reverting back to

background-image: url(../../img/layout/bgOutside-rtl.jpg);
background-repeat: no-repeat;

Interestingly enough, this problem only surfaced when using the Windows version of Chrome, not when coding in Linux...

Answer 8

Encountering the same issue with Chrome led me to a bizarre solution

In the body wrapper, my original CSS code looked like this

background-image: url(../../img/layout/bgOutside-rtl.jpg);

The image ended up repeating, which was not ideal. Despite trying various solutions found elsewhere, things only seemed to get worse.

To address this, I made the following adjustment

background-image: url(../../img/layout/bgOutside-rtl.jpg);
background-repeat: no-repeat;

Although PHPStorm recommended a different approach

background: url(../../img/layout/bgOutside-rtl.jpg) no-repeat;

This change seemed logical but unfortunately didn't resolve the issue. Instead, Chrome interpreted it as an instruction to not display any image at all.

The only solution that worked for me was reverting back to

background-image: url(../../img/layout/bgOutside-rtl.jpg);
background-repeat: no-repeat;

Interestingly enough, this problem only surfaced when using the Windows version of Chrome, not when coding in Linux...

The CSS background seems to be malfunctioning in Chrome

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to make a table stay at a specific width for screen sizes larger than 1000px, but then adjust its size accordingly as the window size decreases?

"Trigger a hover effect on one element, but have it impact a

Click on the navlink to open the HTML page in the same window

Learn how to automatically set the checked state of a radio button by toggling another radio button

What is the best way to line up inputs and button-styled links in Bootstrap v4?

Uneditable border in Bootstrap table

Require an additional button to dynamically load more content and shift all existing elements further down the page

The absence of the pyramid in the WEB GL canvas is noticeable

What are the possible reasons for my load function failing intermittently?

Tips for modifying the size of the <code> tag against a background?

Transform a section of a canvas into a PNG file

Can the labelDisplayedRows be disabled in the table pagination actions of Material UI?

Executing $(this).parent().remove() triggers a full page reload

Manipulate the content of any webpage without using external extensions by injecting your own HTML, CSS, and JavaScript code

What methods can I use to customize the appearance of the acceptance label in a contact form created with

Shift designated list item to the right with overflow handling

Is it a not-so-great idea to use a combination of Bootstrap CSS and Custom CSS for styling

Incorrect page height displayed in the embedded Facebook browser on iOS 9.x

Using jQuery to identify whether the dates displayed in a table are earlier than the current date

Vue Labyrinthine Design theme