CODEWITHSUNDEEP
cssbackground-image
Nora McDougall-Collins
Nora McDougall-Collins

Reputation: 531

Contain value not working in background size

This question is very similar to another question, but is not exactly the same in that the code does not have the background shortcut code, but uses the individual rules.

Notes about the layers Layer 1 is an inline style created by PHP Layer 2 is my attempt to add the contain value to the layer in the child theme without overriding the PHP. Layer 3 is the parent theme assigning the cover value to the layer. In Firefox Inspector, the background-size rule shows as being crossed out. Layer 4 is also part of the parent theme.

element 
{
    background-image: url(https://montanawebmaster.com/wp-content/uploads/2018/11/Bug.jpg);
}

#masthead .header-image 
{
    background-size: contain;
}

#masthead .header-image 
{
    display: block;
    width: inherit;
    max-width: 100%;
    margin: 0 auto;
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: fixed;
}

.kahuna-cropped-headerimage div.header-image 
{
    height: 100%;
}

This is affecting several sites using the parent theme, but here is an example: https://montanawebmaster.com/images/why-is-the-wordpress-kahuna-theme-messing-with-my-images/ The bug image in the banner should be contained as opposed to cover.

Upvotes: 0

Views: 111

Answers (1)

Oneezy
Oneezy

Reputation: 5023

The issue is the background-attachment: fixed.

You'll need to update your css to:

#masthead .header-image {
    background-repeat: no-repeat;
    background-attachment: unset;
}

With this new change, you may or may not want to set it back to cover.

Upvotes: 2

Related Questions