Dusk to Dawn Background Image

  • Unknown's avatar
    sugarlodge · Member ·

    I would like to change the background image on my site but in IE9 it still retains the gradiated images after I make the change.

    I have purchased the Custom Design option and have gone through the first CSS tutorial.

    If anyone has any guidance for updating the CSS to either:

    – fully replace bacjground image
    – Change existing gradient colors
    – Eliminating the swirlly images at top and bottom of background

    I would greatly appreciate it.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Don’t use the CSS to change the background, go to appearance > background and change your background color, or add the background image there. That is the easiest way.

    When it comes to IE, sadly it is entirely too reliant on using cached pages instead of getting updates even when it knows there is an update (that is how MS makes IE appear to be a fast browser). With IE, alway force refresh the page and if that doesn’t work, then clear the browser cache and then restart IE.

  • Unknown's avatar
    sugarlodge · Member ·

    Thanks. That makes sense now as Chrome and Safari both appear to take the change. I still cannot get IE to work even after clearing the history. Is there something else I should be doing?

    Also, I would like to get more familiar with CSS editing and wouldn’t mind maintaining some of the original style atributes, with possibly different colors.

    What lines would I need to edit to make those changes?

    Thanks again for your time.

  • Unknown's avatar
    thesacredpath · Member ·

    On your site, what background am I supposed to be seeing?

    Your major problem with the background image is that it is absolutely huge, both dimensions wise and file size wise and most likely IE is simply choking to death on it. It took forever to show up for me with my wireless internet service. It is 5000px x 3750px and over 2.6mb. You need to optimize that down to a reasonable size of perhaps 1600px wide and under 200k in file size.

    If you do not know how to do that, here it is at 2000px wide and a file size of 153k.

    CSS isn’t rocket science, but you have to get at least a reasonable understanding of the relationship between the markup (XHTML) and the CSS. One of the easiest ways to do that is with the Firebug add-on for Firefox. When active it will show two panes at the bottom of the web page with the markup (XHTML) on the left and the CSS on the right. You can then use the inspect feature to find the styling and markup for the various elements in the web page.

    Also there are some listings of tutorials at the top of the CSS forum that can be helpful to work through as a starting point.

    You should remember that CSS is theme specific, so what works in one theme will very likely not work in another since each theme author decides what they are going to name selectors in the CSS.

  • Unknown's avatar
    sugarlodge · Member ·

    Thanks again. I loaded the new background and still get the same result. On my IE the only difference I get is that the top design is eliminated. Everything seems to work great in Chrome. Safari on my iPad works better but the smaller background picture doesn’t fill the screen.

    Do you see the clouds background in IE? I been on two PC’s now with IE and have yet to see the clouds.

    I’ll definitely load the Firebug add-on. That sounds like a great tool. I’ll play with it a little to see if I can find something that nakes a change.

  • Unknown's avatar
    thesacredpath · Member ·

    Yeah, I hadn’t thought of the iPad, which is 2048px wide. You could take your larger image and take it down to say 2400px in width and save as a medium JPG. That would cover the iPad in landscape orientation.

    I don’t have IE, so I can’t check. Normally there is no problem with the background images and they work in all browsers so I’m afraid I’m at a loss.

  • Unknown's avatar
    sugarlodge · Member ·

    After playing with the IE Developer Tools it appears the problem is with the follow style:

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#012c57′, endColorstr=’#ffcb70′); /* for IE */
    background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255,203,112)),
    color-stop(0.3, rgb(107,138,169)),
    color-stop(1, rgb(1,44,87))
    );

    How do I nuke it out of the current style sheet?

  • Unknown's avatar
    sugarlodge · Member ·

    Scratch that last request. I was able to figure it out.

    Thanks so much for sending me down the right path and for the direction on the image.

    This forum is a great resource. I’m sure I’ll be back again with more questions.

  • Unknown's avatar
    thesacredpath · Member ·

    Funny, the first “filter” bit is in there for IE as it doesn’t understand CSS gradients.

    You are welcome and best of luck.

  • The topic ‘Dusk to Dawn Background Image’ is closed to new replies.