Search code examples
cssbackgroundbackground-positionbackground-sizebackground-repeat

CSS Fail - background-position, background-repeat, background-size, background-attachment

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.

Solution

  • 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').