Jump to content

Trying to do 2 basic things in CSS and am too stupid to figure out how


Recommended Posts

I'm trying to create a section on a page where it displays a random image from a given folder on page load. I also want this image section to be somewhat transparent, so that the text in front of it is readable. Very sorry if I bungle the terminology, I'm relatively new at this:


1. What code should I use, or how do I write the code, to automatically load a random image from a folder as a <div> section "background-image" on page load? I know how to do this for one specific image, but I don't know how to point to folder full of images and then have it select one at random each time the page loads.


2. How do I make it so that the text on the page is centered within the boundaries of the image, and the image is somewhat transparent so that the dark grey background of the page causes the image to appear darker, in turn making the lighter text in front readable?


Can all this be done using embedded CSS or will I need to learn some basic Javascript (at least for #1)?


My website is set up so that the index.html page is in the root folder, and the images I want to randomly load are in a folder within that one called "img/". If you post any examples, I'd really appreciate it if they are either annotated so that an idiot like me could figure out how to apply them, or already formatted to suit my folder structure. Please be aware that it's also already running Bootstrap and Swipebox externally, so I'm trying to be mindful of overlapping labels that might cause this whole thing not to work.


Thanks for reading!

Link to comment
Share on other sites

Javascript is not file-aware. To do this with Javascript you would need to create a Javascript array of all of the image filenames and then randomly select an index for this array.





For opacity look at...




And for centering look at...



Link to comment
Share on other sites

Thanks...maybe I'm undercaffeinated but I still can't figure out how to apply this. The W3Schools site is good for helping me get an understanding of the basics, when I'm thinking clearly, but I'm still not sure whether you're telling me I can't point any part of a script to files in a folder, or assign them index numbers that way.


I want to know if I can I do something like this, and if not, what needs to change:





var randimages = new Array("folder/image01.jpg" "folder/image02.jpg" "folder/image03.jpg");

document.getElementById("intro").innerHTML = randimages[Math.floor((Math.random() * 3) + 0)];



div.intro {

height: 800px;
width: 800px;
opacity: 0.5;
position: relative;
left: 200px;



<div id="intro">

<p>Text goes here</p>



Link to comment
Share on other sites

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>#intro {height: 800px;width: 800px;background-color:#000;opacity:0.20;filter:alpha(opacity=20); /*ie*/position:relative;top:-50px;z-index:-1;}</style><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>window.onload = init;function init(){var randimages = ["images/image01.jpg", "images/image02.jpg", "images/image03.jpg"];var str = "url(" + randimages[Math.floor((Math.random() * 3) + 0)] + ")";document.getElementById("intro").style.backgroundImage = str;}</script></head><body><div><p><b>Text goes here</b></p><div id="intro"></div></div></body>    </html>
Link to comment
Share on other sites

var str = "url(" + randimages[Math.floor((Math.random() * 3) + 0)] + ")";


3 represents number of images, if less than this finding would result in error


use instead.

var str = "url(" + randimages[Math.floor((Math.random() * randimages.length) + 0)] + ")";


this will adjust automatically to number of images in array.


Also make sure image location from array is correct to relative to the page, to make sure, insert image in page using img tag, if it shows, then use its src value.

Link to comment
Share on other sites

Thanks again! I really appreciate your help with all this.


I'm still getting the same error message re line 42. Is it possible the "str" property style is erroneous, or something adjacent to it?


I created the example with just three images on purpose, to make sure it works, but thanks for showing me how to automatically adjust to the number of images in the array. I would have probably had to ask how to place that anyway. The tutorial on the W3Schools site doesn't show how to nest the ".length" part into another function, or if it does, again...you know, I'm dumb.


I'm also pretty certain the image locations are correct. Those quoted paths (e.g. "images/image01.jpg") are used elsewhere on the same page without issue.

Link to comment
Share on other sites

It should if you followed the code above, but you should make sure

1) the filename and extensions matches exactly, including any capitalisation especially, as image.jpg is not treated the same as image.JPG, (note if you use windows the extension is sometimes hidden, and people have been known to save as image.jpg.jpg but all they see is image.jpg).

2) you are viewing this from localhost server, or website, double clicking and viewing it directly from a folder on hardrive is not the same.

3) are you referencing the id correctly? it should just id value NOT including '#' as in '#myid' just 'myid'


I've tried the code above and it works fine, and i can't reproduce the error message you provided, by wrong filename, incorrect id etc. also line 42? there is no js code at line 42. maybe you should post your current code.

Link to comment
Share on other sites

Thanks again. 1. Filenames and extensions are exact matches. I'm a stupid novice when it comes to understanding and writing js and css, but some of those examples you gave are the kind of rookie mistakes I can safely say I don't make. :) Been using a computer for a while now.2. Currently I'm viewing the local file in Chrome while editing in Sublime Text. I'll upload to the web and see if it works there.3. Relevant ID references are as follow: [line 18] #intro {[line 42] document.getElementById("intro").style.backgroundImage = str;[line 242] <div class="intro"> Line 42 is copied, in its entirety, above. I also copied it in its entirety in my first post from this morning. That's line 42 on my end, mind you, because there's a bunch of other stuff in my html file that you're not seeing because it's not relevant to this discussion. The point being, can we identify an issue with that line, as my browser seems to be doing?


I was given this piece of code (see above) by davej:


window.onerror = function(m, u, l){
alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);
return true;
...which structured the error message I'm getting: "Uncaught TypeError: Cannot read property 'style' of null".

Finally, davej gave me a whole bunch of code earlier, which I basically copied and pasted into my html and then changed things like filenames so that they'd point to the right places, but I'm still wondering if this part: var randimages = ["images/image01.jpg", "images/image02.jpg", "images/image03.jpg"]; ...can be done so that instead of me having to type out each filename in quotes, I can just point it to a directory or folder? Like:


var randimages = [ create array from contents of "images/" ]


(contents of brackets above are descriptive, I know that's not viable code!)




I tried copying and pasting davej's code into a new html file. I saved that file to my desktop and also created a folder on the desktop called "images", into which I placed three jpg images to match the filenames in the example. It worked perfectly when I opened the html locally in Chrome.


So what's tripping me up? Could there be some conflicting code somewhere with an external js file?

Edited by anonymous_bosch
Link to comment
Share on other sites

php is server language, it can access directories and retrieve details about image, height, width, type, it could even create thumbnail images for large images if you want, you can also use it to produce JavaScript code, so can drag the information about images in a folder, loop through these images a produce a JavaScript array of these images, JavaScript can't do that on its own.

similar to this



You need to have a host that provides php as a server language, and you can use wamp to install php localserver on your windows, mac comes with local server optional feature or install xamp, which is mac version of wamp.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...