asked on

Overriding Inline Styles

This is a new one to me. I have a wordpress website site up here:

Learn to Earn

As you can see I have a featured slider on the home page. That slider is invoking images and using a "background-image" inline style to serve them up. This is the code that is being presented:

element.style {
    background-image: url("http://learntoearndayton.org/wp-content/uploads/2013/10/slider-photos_22-750x400.jpg");
    background-position: left top;
    height: 400px;
    position: relative;
    width: 750px;
}

Open in new window

The class that encloses this is class="coin-slider". My issue is this:

When I am viewing this on an iphone, the fixed 750 x 400 image is too big. However, I cannot seem to override this with CSS. Is it possible to override the inline style background image with CSS?

Pat

leakim971

add !important at the end

element.style {
background-image: url("http://learntoearndayton.org/wp-content/uploads/2013/10/slider-photos_22-750x400.jpg") !important;

mcpilot1

ASKER

i am not sure I explained fully. The 750 x 400 is fine for the full site. I need to scale those images for the mobile site. I can't scale a background image using CSS when it's an inline style, at least I have not been able to do that. That's what I need to resolve.

leakim971

you can replace background-image with jquery:

$(document).ready(function() {

if (screen.width<750||screen.height<400) {
$(".coin-slider").css("background-image", "url('http://learntoearndayton.org/wp-content/uploads/2013/10/slider-photos_22-smallOne.jpg')");
}

});

mcpilot1

ASKER

is it possible to replace all of the images in that case? there are a number of them that rotate through,

Pat

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial