Responsive Header Image with media queries

[Andreas]

Andreas

April 26, 2016 at 3:12 am

Hi guys,

for http://www.supplimo.de I want to have a responsive page header image that changes the image according to screen size. I tried to do it with media queries, but I cannot find the right selector. Can you tell me what the selector in the theme is or if there is an other option to make the header image responsive.

See Code:

@media (max-width: 500px) {
.titleclass home-title-class {
background-color: #ff9a32;
background: url(‘*Login to see link center center no-repeat;
}
}

@media (min-width: 501px) and (max-width: 800px) {
.titleclass home-title-class {
background-color: #ff9a32;
background: url(‘*Login to see link center center no-repeat;
}
}

@media (min-width: 801px) and (max-width: 1000px) {
.titleclass home-title-class {
background-color: #ff9a32;
background: url(‘*Login to see link center center no-repeat;
}
}

@media (min-width: 1001px) and (max-width: 1500px) {
.titleclass home-title-class {
background-color: #ff9a32;
background: url(‘*Login to see link center center no-repeat;
}
}

@media (min-width: 1501px) and (max-width: 1800px) {
.titleclass home-title-class {
background-color: #ff9a32;
background: url(‘*Login to see link center center no-repeat;
}
}

@media (min-width: 1801px) and (max-width: 2500px) {
.titleclass home-title-class {
background-color: #ff9a32;
background: url(‘*Login to see link center center no-repeat;
}
}