Solved

Overriding Inline Styles

Posted on 2013-11-06
5
223 Views
Last Modified: 2013-11-29
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
0
Comment
Question by:mcpilot1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39629168
add !important at the end

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

Author Comment

by:mcpilot1
ID: 39629174
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.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39629177
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')");
}

});
0
 

Author Comment

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

Pat
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39629729
$(document).ready(function() {

if (screen.width<750||screen.height<400) {
      $(".coin-slider").addClass(".coincoin-slider");
}

});

Open in new window


.coincoin-slider {
    background-image: url("http://learntoearndayton.org/wp-content/uploads/2013/10/slider-photos_22-smallOne.jpg") !important;
}
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question