Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Overriding Inline Styles

Posted on 2013-11-06
5
Medium Priority
?
225 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 1500 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

636 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