Target background-image (url) in CSS?

Question

I'm curious if I can use CSS to target the first url syntax below if a user is below a certain screen width.

For example, if a user's browsers is below 700px, I do not want to show the first background image (background.png) - just the second (background1.jpg).

<div class="right-header" style="background-image: url('/wp-content/uploads/2020/11/background.png'), url('/wp-content/uploads/2020/11/background1.jpg');">

Dyeizon Procopiuk · Accepted Answer · 2020-11-11 23:13:59Z

3

you can use media queries for that:

In your CSS file:

.right-header {
    background-image: url('/wp-content/uploads/2020/11/background.jpg');
}

@media screen and (max-width: 700px) {
  .right-header {
      background-image: url('/wp-content/uploads/2020/11/background1.jpg');
  }
}

And in your HTML:

<div class="right-header"></div>

answered Nov 11, 2020 at 23:13

Dyeizon Procopiuk

816 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dyeizon Procopiuk Over a year ago

By the way, in your code, you are using an inline CSS, is highly recommended to use an external CSS file, link it with the link HTML tag.

Collectives™ on Stack Overflow

Target background-image (url) in CSS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related