July 9, 200818 yr I have a background image on my site. I want it to view a certain way. Is there a way to relegate it so that the background image only shows up on screen resolutions higher than 1024x768 or that it then shows a different background image? Is there a way to do this without javascript and in CSS?
July 9, 200818 yr I'm pretty sure the only way to do this is javascript. Use js to tell you screen resolution, then have different css files for different resolutions.
July 9, 200818 yr No expert at js, but try this: if (window.innerWidth < 800) { document.write('<link rel="stylesheet" type="text/css" href="namehere.css">'); } Then in html: <link href="namehere.css" rel="stylesheet" type="text/css" /> <script src="nameofjsfile.js" type="text/javascript"></script> For anyone with a resolution less than 800px across. Could change the inner width to change the resolution. Or add more if statements for more options?
July 9, 200818 yr Put this in the head of your html: <script language="JavaScript"> <!-- if ((screen.width>=1024) && (screen.height>=768)) { document.write('<link rel="stylesheet" type="text/css" href="css2filename.css">'); } else { document.write('<link rel="stylesheet" type="text/css" href="css1filename.css">'); } //--> </SCRIPT> Will give people with 1024x768 or more resolution css file 2, and anyone with less than that cssfile1. You can change the values at the top. Did you need more options for stylesheets than that? Hope it helps.
July 9, 200818 yr Did it work? Use a case statement like i've written below if you need more options... <script language="JavaScript"> <!-- switch(screen.width) { case 1024: document.write('<link rel="stylesheet" type="text/css" href="css2.css">'); break; case 1280: document.write('<link rel="stylesheet" type="text/css" href="css1.css">'); break; } //--> </SCRIPT> add more cases if needed.
July 9, 200818 yr Author it's not quite working. i have two external style sheets linking in as well. what do you suggest. When i get rid of the external style sheets. The background obviously goes away on anything less than 1024x768 but it goes away on anything bigger too.
July 9, 200818 yr What I would do personally would be to have something along the lines of: window.onload = function() { document.body.className = 'screenRes' + screen.width + 'x' + screen.height; } in your JS and have separate declarations in your CSS file for the different screen resolutions you want to support: body { background-image:url(bgDefault.png); } body.screenRes800x600 { background-image:url(bg800x600.png); } body.screenRes1024x768 { background-image:url(bg1024x768.png); } This way, the JS code is lightweight and the dynamic class name should override the default. Plus, it means you can keep your CSS in a single file
July 9, 200818 yr Author That's my head right now. <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Web Development – Search Engine Placement Service – Online Marketing</title> <script language="JavaScript"> <!-- switch(screen.width) { case 1024: document.write('<link rel="stylesheet" type="text/css" href="css/otdformat-small.css">'); break; case 1280: document.write('<link rel="stylesheet" type="text/css" href="css/otdformat.css">'); break; } //--> </SCRIPT> <link href="css/otdformat.css" rel="stylesheet" type="text/css" /> <link href="css/otdlayout.css" rel="stylesheet" type="text/css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="css/otdIE.css" /> <![endif]--> <![if !IE]> <link rel="stylesheet" type="text/css" href="css/otdlayout.css" /> <![endif]> </head> Web Development – Search Engine Placement Service – Online Marketing
July 9, 200818 yr Above is much better - told you I wasn't an expert! [Edit] Not sure why what I said wasn't working for you though...
July 9, 200818 yr Author What I would do personally would be to have something along the lines of: window.onload = function() { document.body.className = 'screenRes' + screen.width + 'x' + screen.height; } in your JS and have separate declarations in your CSS file for the different screen resolutions you want to support: body { background-image:url(bgDefault.png); } body.screenRes800x600 { background-image:url(bg800x600.png); } body.screenRes1024x768 { background-image:url(bg1024x768.png); } This way, the JS code is lightweight and the dynamic class name should override the default. Plus, it means you can keep your CSS in a single file can you give me an example? would i put the first code box in my header? what parts do i need to customize and can you give me an example of how I would customize it? thanks
July 9, 200818 yr Author Above is much better - told you I wasn't an expert! [Edit] Not sure why what I said wasn't working for you though... Um but that's not working either.
July 9, 200818 yr It should do.. add: <script language="JavaScript"> <!-- window.onload = function() {document.body.className = 'screenRes' + screen.width + 'x' + screen.height;} //--> </SCRIPT> <link rel="stylesheet" href="mainstylesheetname.css" type="text/css" /> into your header then the below into your css. body {background-image:url(bgDefault.png);} body.screenRes800x600 {background-image:url(bg800x600.png);} body.screenRes1024x768 {background-image:url(bg1024x768.png);} You dont have to change anything except for the .screenres800X600 etc, which you can change to different values if needed. You can also add more body statements. You will also need to replace the bg urls and css url with your own. These codes are all working on my comp...
July 9, 200818 yr I hope Mikec1uk's description cleared things up for you - I figured that it was pretty clear, but obviously not! To cloud things even further, I present the IE expression way to do it body { background-image:expression('url(bg' + screen.width + 'x' + screen.height + '.png)'); } Of course, this is IE only. And probably pointless now I think about it
Create an account or sign in to comment