1

When I put the following into a div in the main body, this WORKS:

<div style="display: block; width:100%; height: 100%; min-height: 100vh; background-color: #FFFFFF; background: url(./images/pic.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;">

BUT when I use CSS is DOES NOT WORK:

<style type="text/css" media="all">
.myMainDiv {
    width:100%;
    height: 100%;
    min-height: 100vh;
    background-color: #FFFFFF;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
</style>

<div class="myMainDiv" style="display: block; background: url(./images/pic.jpg);">

It seems to be going wrong, because I need a different pic for each background and then this results in the background-repeat etc being ignored. (Note: also different divs will have different display values, either block or none, so they need to be separately stated as well, but that is not the problem.)

Anyone know why and if there is a workaround.

Rewind
  • 2,554
  • 3
  • 30
  • 56

1 Answers1

5

Hmm. Seems you are overwriting your CSS. Using backgorund: url('./images/pic.jpg') as an inline style is the problem. You are overwriting all of your CSS properties (background-position, background-repeat, etc...) with this inline style. Replace backgorund: url('./images/pic.jpg') with backgorund-image: url('./images/pic.jpg').

Wais Kamal
  • 5,858
  • 2
  • 17
  • 36
  • 1
    Wow. Fast work. So fast in fact I will have to mark this as answer in 8 minutes time as it will not allow me to do so before then. – Rewind Feb 27 '17 at 17:49