CSS Background Image not displaying in SharePoint 2013, yet functioning correctly on local machine

This method is effective when tested locally

body { 
    /*background: Gainsboro;*/
    background: url(../dt_images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

After modifying the master page HTML file on the SP 2013 server, the expected cloudy background image does not appear (although other override CSS changes are visible).

body {  
    background: url(../DT_CustomFiles/DT_IMAGES/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Is it possible that SP 2013 restricts the use of background images?

Appreciate your assistance

Answer №1

To resolve the issue, consider uploading the image to Site Assets within your SharePoint site and update the link in the css file to direct to this new location. This method should solve the problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The div is not displaying the conditional styling as expected

I need help with mapping an array of cards wrapped in a div. I want the first, second, second-to-last, and last divs to go on a new line or take up the entire row. My project is in Vue3 and I'm using the PrimeVue component library. <div class=" ...

What is the best method for extracting and storing search suggestions data with selenium?

Initially, I had posted this inquiry before, and my apologies for reposting. However, I am still struggling to comprehend why the code works for the individual who responded but not for me. How can one retrieve values from search suggestions after enterin ...

The loader image does not appear on mobile screens during an AJAX call, but it functions correctly on desktop screens

While I have successfully implemented a loader (.gif) using a div tag in an AJAX call for desktop screens, the same code is not functioning properly on mobile devices. Instead of displaying the loading animation, it simply shows a white screen. <div ...

The Disabled element does not exhibit effective styling

When we include the disabled attribute in the text element, the style does not work. Can you explain why? <input pInputText [style]="{'padding-bottom':'10px','padding-top':'10px','width':'100%&apos ...

Error: Identical div IDs detected

<div id="tagTree1" class="span-6 border" style='width:280px;height:400px;overflow:auto;float:left;margin:10px; '> <a class="tabheader" style="font-size:large">Data Type</a><br /> <div class="pane">Refine sea ...

Overflow scrollbars do not appear on flex divs

I am struggling with implementing a simple flex container that contains standard divs. The issue I am facing is that the overflow does not display a vertical scroller as desired. In order to achieve this, I have included the following CSS code snippet: #c ...

Softly Transitioning Slideshow with Slide Effects

Has anyone had any experience with FlexSlider or jQuery in general? I've been using the FlexSlider slideshow script and I've made some customizations to fit my needs. You can check it out here: My main query is, does anyone know how to make the ...

Two tables are positioned using distinct alignments but share a common stylesheet

I have created two tables, one using HTML (with a touch of PHP) and the other with two PHP loops. Starting with the stylesheet: .statistics { font-family: Arial, monospace; font-size: 36px; margin-left: 5%; width: 90%; } .statistics tr { ...

Adjust the color of the border surrounding the icon within a button

Is there a way to customize the color border of an SVG icon within a button to match the text of the button? My code snippet can be found on JSFiddle, along with my usage of Bootstrap: JSFiddle @import 'https://maxcdn.bootstrapcdn.com/bootstrap/4 ...

Adjusting color of fixed offcanvas navbar to become transparent while scrolling

After creating a navbar with a transparent background, I am now using JavaScript to attempt changing the navigation bar to a solid color once someone scrolls down. The issue is that when scrolling, the box-shadow at the bottom of the navbar changes inste ...

Is there a solution or workaround for the issue of fake anti-aliasing in Microsoft Edge when it comes to the border of sticky headers using Bootstrap 4?

In my current project, I came across a Pen shared by Balaji731 on Bootstrap 4 table with the scrollable body and header fixed. While testing the Pen in Microsoft Edge, I noticed that when <th> borders are enabled, they disappear while scrolling, cre ...

Is there a way to postpone the mouseover event for vertical tabs?

While this may seem like a simple question to some, my programming skills are not quite up to par. I am seeking help from someone who can assist me. My goal is to delay the mouseover event on vertical tabs so that users can jump directly from tab 1 to ta ...

The dimensions of the background for a span element

I have a span element with a background-color applied to it. Is there a way to adjust the size of this specific background? I attempted using background-size: auto 2px;, but it did not produce the desired effect. I am looking to make the background color ...

Default Link Color Being Utilized by Blog Title

My website was created using a theme (HTML, CSS, JavaScript), but the Blog Title is stuck with the default link color. I've attempted several methods to change the Title color without success. What's the solution for changing the Title color? ...

What is the best way to display an element once an input field with type "date" is populated with a value

Struggling to create a dynamic form that reveals additional fields when a date picker is used? I've searched for solutions, but everything I find involves complex validations and logic that exceed my needs. I've had some success with revealing e ...

Changing the display of elements using Javascript in IE6 by modifying class

Currently, I am facing an issue at work that involves a piece of code. The code functions correctly in Firefox 3.6 where clicking on a row changes its class name and should also change the properties of the child elements. However, in IE6 and possibly othe ...

Unable to remove the vertical dropdown menu padding issue in Firefox

issue: https://i.stack.imgur.com/qisVn.jpg My website appears correctly on IE, Opera, and Chrome, but in Firefox, there is a spacing problem between each image in the dropdown menu. I suspect the issue lies within the CSS code. The same spacing issue occ ...

Fullscreen overlay or pop-up display

I have a website with images and iframes displayed within a fancybox. Everything is functioning properly, but now the website's requirement is to have a fullscreen overlay like on the usatoday website. Take a look at for reference. When clicking on ...

The styles of Bootstrap 4 are not being used

My Bootstrap 4 css file isn't working properly and I need space for my navigation bar. <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom"> <div class="container"> <a class="navbar-brand" href="#">Start Bootstrap ...

Struggling with implementing a grid layout using CSS

I am currently facing an issue with my code where I am attempting to set up a wrapper element as a grid. However, upon inspecting the page, I am receiving notifications that my inputs for display, grid-template-columns, and grid-template-area are considere ...