I have been searching through several questions on this platform today in the hopes of finding an answer to my query, but unfortunately, I haven't had any luck so far. That's why I'm turning to you all for help.
My current goal is to transition my website into a responsive web design, and I've run into some trouble with handling images.
The Problem:
I want to incorporate background-images from my CSS, but since the containers don't have any content inside them, setting the height to auto will essentially make the container size 0 and therefore not display the image. However, I need the height to be auto to ensure that the image scales with the webpage and maintains its proportions without large empty spaces.
I know that to scale background images, I should set my CSS like this:
background: url(../images/image.jpg);
background-repeat: no-repeat;
height: auto;
width: 100%;
The reason why this setup doesn't work for me is because I want the background image to act as an actual visible image rather than just a background. But because there's no content within the container, the image doesn't show up. So, I'm looking for a solution to overcome this obstacle.
I'm opting to load images via CSS because I want to offer multiple versions (scaled for specific device sizes) of an image based on the viewer's device (desktop, mobile, tablet, etc).
Just to cover all bases, I've also tried using the img tag in HTML and scaling it through CSS for different devices. However, if possible, I'd still prefer loading images through CSS to provide various file sizes for different devices and enhance user experience on mobile devices. If there's another approach to achieve this, please let me know. I've dedicated 26 working hours to this, so any assistance would be greatly appreciated.
EDIT:
To simplify things and facilitate troubleshooting, I've created a test template to illustrate what I'm dealing with.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
...
My CSS:
/* This stylesheet was designed and developed by Chris Converse, Codify Design Studio */
...
...
If you wish to see an example of what I aim to accomplish, visit www.dreamcreationstudios.com/test2.html. In that instance, the effect is achieved using the img tag. My objective is to replicate the same outcome but instead load the image via CSS, allowing me to present cropped versions tailored to different screen sizes. Thank you.