Solved

Overriding Inline Styles

Posted on 2013-11-06
5
217 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
  • 3
  • 2
5 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
$(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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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.

763 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now