CODEWITHSUNDEEP
jqueryhtmlcss
AD
AD

Reputation:

Jquery - How to hide images when there is no stylesheet?

I am using a CSS hack where the image is scaled, but there is a problem.

If the user switches the stylesheet off, the image used as the background is shown, sometimes the image is really huge.

Therefore, I need to hide the background div when there is no stylesheet.

I've thought about dynamically adding the image via JQuery, whilst this works -- it does not take into account whether there is no stylesheet.

How do I switch off images, or the background div when there is no stylesheet?

Thanks.

CSS

background {
 width: 100%;
 height: auto;
 position: absolute;
 left: 0px; 
 top: 0px; 
 z-index: -1;
}

.stretch {
 width:100%;
 height:100%;
}

HTML

<div id="background">
<img src="background_1200x800.jpg" class="stretch" alt="" />
</div>

Upvotes: 0

Views: 263

Answers (6)

AD
AD

Reputation:

I've decided to keep it with the image, as I don't think its totally 100% cross browser resolution.

Topic closed.

Upvotes: 0

Mike Salkeld
Mike Salkeld

Reputation:

Just a thought and NOT TESTED...

HTML:

<div id="background">
<img src="background_1200x800.jpg" height="0" width="0" alt="" />
</div>

CSS:

div#background img {width: 100%; height: 100%}

Idea:

Set HTML image attributes to be zero by default. Use CSS to overide dimensions... CSS disabled let the image fall back on its own inline values.

Upvotes: 0

beggs
beggs

Reputation: 4195

My previous answer does not achieve the desired effect, as I missunderstood the question. However the following works for me:

<html>
   <head>
      <title>Background to fit screen</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

      <style type="text/css">
         html {height:100%;}
         body {height:100%; margin:0; padding:0;}
         #bg {position:fixed; top:0; left:0; width:100%; height:100%;}
         #fg {position:relative; z-index:1;}a
      </style>
   </head>
   <body>
      <div id="bg">
        <img class="stretch" src="background_1200x800.jpg" width="0" height="0">
      </div>
      <div id="fg">
        <p>content goes in the `fg` div.</p>
      </div>
      <style type="text/css">
         #bg img {width:100%; height:100%;}
      </style>
   </body>
</html>

I tested this in FF3.5 (on Vista) the desired effect (no background image) is achieved when I use the Web Developer extension to turn off all styles. With styles on the entire view-port is covered with the background image and the content is on-top of the image.

I also took a quick look in IE7 (on Vista) and Chrome (on Vista) and both show the image covering the entire viewport with the content placed on top. I did not test turning off styles in browser other then FF3.5.

I have no idea if the second style element in the body is valid or if it is considered a good idea or an abomination

Upvotes: 0

Chetan S
Chetan S

Reputation: 23813

Check the document.styleSheets collection to detect if there are stylesheets loaded.

Edit: I know this is a hack to cover for another hack, but how about adding a display:none inline style to the image and adding a display:block!important to the stretch class in stylesheet.

Upvotes: 2

mkoryak
mkoryak

Reputation: 57968

how about something like this (do this onload):

if(!$("style").length){
 $("#background").hide();
}

Upvotes: 0

beggs
beggs

Reputation: 4195

Can you put the background in the css file?

#id { background: url(background_1200x800.jpg) no-repeat center }

Upvotes: 2

Related Questions