CODEWITHSUNDEEP
htmlcssimagecss-selectors
Henry Wang
Henry Wang

Reputation: 171

Changing an image through CSS

I want to replace the main "hero" background I have on one of my pages. Since I am using Wordpress, I am forced to use custom CSS (I cannot edit HTML).

I have tried targeting the div where the current photo is contained using class selectors as shown below:

.header .custom-mobile-image {

    background-image: url(https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg);


}

Here is the HTML code i am trying to target: 

<div class="header custom-mobile-image" style="background-image: url("https://thenovelcolumn.com/wp-content/uploads/2019/04/education-books.jpg"); background-color: rgb(106, 115, 218); padding-top: 74.5938px;">

The link to the page itself: http://thenovelcolumn.com/the-10x-rule

The target photo is the first one on the page with three opened books in the center.

I expected my CSS code to change this photo to whatever the link specifies it to, but the photo remains unchanged.

Upvotes: 0

Views: 557

Answers (4)

moonbyt3
moonbyt3

Reputation: 56

Writing inline css (style="some:css;") is not the best idea. It will allways neglect styles from your .css file. As someone already mentioned it's about specificity. Weakest are type selectors (html tags and pseudo elements), then goes classes, then id's

if you have inline css, it will apply styles over .css file. Only thing stronger than inline css is using !important

Upvotes: 0

Johannes
Johannes

Reputation: 67768

Your selector should be .header.custom-mobile-image (i.e no space between the two classes - they both are assigned to the same element, the space would mean a parent / child relation)

And you should add !important in that rule to override the more specific style attribute.

Upvotes: 3

Elena Dontsova
Elena Dontsova

Reputation: 56

That's because styles from "style" attribute have bigger specificity than any styles you might add with classes and even id's: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

So in this case only way is to use !important:

.header.custom-mobile-image {
    background-image: url(https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg) !important;
  }

Upvotes: 2

Ilijanovic
Ilijanovic

Reputation: 14904

here we go:

.header.custom-mobile-image {

background-image: url("https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X- 
Rule-Image-2-e1555476700855.jpg") !important;


}

Upvotes: 1

Related Questions