changing background images in a div

[kgkgkg67]

Hi, I’m pretty much a beginner at HTML/CSS and I’m trying to create my portfolio website. For the home/front page of the site, I want to have a main div under a menu bar that pretty much takes up the majority of the page with text over an image that takes up the entire div. I want the image to change automatically to a new image every 5-10 seconds or so (a slideshow, I guess). So my question is,

1. Can I do this with just CSS, or do I need to add in some JQuery or JS or something?
2. How do I make it so that the image scales down to the size of the div automatically, in proportion, no matter what computer it’s on? I’ve always had this problem with background images…

Sorry for all the questions and thank you in advance to anyone who helps me! I’m trying, I really am :(

[Vermaas]

For your first question: Yes, you can use CSS (CSS3) to make an image slider, but (!) this technique is not working on browsers like IE7-IE8 (not checked IE9). If that’s no problem to you, I encourage you to use this technique.

For the second question: You could try the CSS background property: background-cover. Chris wrote some stuff about this: https://css-tricks.com/perfect-full-page-background-image/.

Although this technique is not bullet prove.. The image shrinks with the browser, but when you don’t resize the browser also vertically, you’ll see the (white) background color visible on the bottom. You got do some Googling or try this link: http://srobbin.com/blog/easy-full-screen-background-images-with-jquery/

[kgkgkg67]

Thank you so much for your advice! I’ll try all three of those options and see what works best for me!

[Author]

Posts