Hi Digital Point, any help would be awesome!!!!!!!! Below is my index.html code.. can somebody tell me how to fix it so that the background image is RESPONSIVE? I got some answers from another forum, but they just made me more confused <!DOCTYPE HTML> <img src="website down.jpg" id="bg" alt=""> <audio autoplay loop> <source src="MP3.mp3" /> <source src="M4A.m4a" /> <source src="OGG.ogg" /> <source src="PCM.wav" /> </audio> </body> </html> I am using the software "TextWrangler." I am saving the HTML file with the settings Line breaks: Unix (LF) Encoding: Unicode (UTF- 8) ... is this incorrect? Is it possible the background image i'm using is the wrong dimensions? I am a complete novice, and I was assuming/praying this would be very simple.. Thanks!!!! dan
Well... first would help if you had more COMPLETE markup, second if it's a BACKGROUND it has NO business in your markup... and yeah, CSS3 can do that but really (though this hinges on what CONTENT is going into your HTML) any image large enough to need special code to be in a responsive layout, probably has no business being a background on a website. Not that it seems to stop anyone from trying -- see all the idiots pissing out the inaccessible parallax tran-wrecks. Most likely you'd want to set this in your CSS: body { background:url(images/websiteDown.jpg) center center no-repeat; background-size:100% auto; } Code (markup): But again depending on the image, it probably doesn't belong there either, if on the website at all.
Hey, much thanks for the quick response!! What is a "markup?" What is "CSS3?" What, ideally, is the best size for a website background? I'm just trying to create a single web page... consisting of a single background image plus an audio player autoplaying my song. Simple as that. I'm just not sure how to go about.. I was assuming it would be the quickest/simplest thing, but I haven't been able to find any straight/clear answers on the internet. I don't mean to disrespect the craft of web design, but I don't have a lot of time to study at the moment.. My current code displays the site fine on my iphone and ipad, but on my desktop, it looks pretty wonky when I resize the browser window.. Again, much thanks for your patience and any information!! dan
Markup is the HTML you put around your content -- HTML stands for HyperText Markup Language. CSS3 is the third version of CSS - cascading style sheets. CSS exists so you can separate "what it looks like" from "what things are" -- in your HTML you should be saying what things ARE... This is a heading, this is a paragraph, this is an audio file, and so forth. CSS is where you add presentation to it to 'make it pretty' -- things like background images go there as they are not "content", they're just there to make it pretty. If you had a picture of say... the album cover from which the audio file was playing, that's content and goes in the markup. If it's a background for the site's design, that's presentation and belongs in the style sheet. It is NOT really something that is quick and simple if you are going to do it properly and make it fast loading, accessible and functional for most people. You are getting lost because building a website is actually quite complex a topic; it's part of why there are so many bad websites out there and people try to use sleazy shortcuts like WYSIWYG editors (frontpage, Dreamweaver) just making things worse. Thankfully you're using a flat text editor (text wrangler) so you've at least been steered the right direction so far.
yes if you use background size 100% auto then it will be responsive but sometime you can face problem of adjusting background
You just need to set the image width as 100% through css.. can be external css or inline-css. It will automatically adjust the image according to the screen-resolution.