I wanted to add a holiday closure notice to a website. I don’t write HTML/CSS code every day, so I just lookup what I need when I need it – that has served me very well for many years. These days, google search is great at giving garbage results. With AI generated websites, and lame article writers, it is hard to find what I am looking for.
I see obvious problems (to me), like using url(“somesite.com/picture.jpg”); – I thought the standard practice was to use double quotes for your style call-out, and use single quotes for nesting, but maybe that is just me. Even when I write standalone CSS, I still use single quotes. Maybe I am the odd one.
For this site, and task, inline CSS makes the most sense.
<div style="background-image:url('flag.jpg');background-repeat:no-repeat,no-repeat;width:100%;height:75px;">Content</div>Also, when the first presented article contains thousands of words, but it does not mention background- size, then I suspect that it is not written by someone who knows what they are doing.
So, my scenario: I found an American flag image, and it is quite wide. That is fine, I want to accommodate larger screens, but I want it to look good on smaller screens as well. It needs to “fit” instead of seeing only stars, or only the top stripe etc. That is where background-size comes into play. Depending on the shape of the block, you may want “contain” or “cover”. for me, cover was the right choice.
Of course, text color over red white and blue is a little tough, it has to be legible. I opted for yellow with a bit of text-shadow to make it stand out.
So my final code looks like:
<div style="background-image:url('flag.jpg');background-repeat:no-repeat,no-repeat;background-size:cover;width:100%;height:75px;color:yellow;text-align:center;line-height:75px;"><span style="text-shadow:0px 0px 10px black;"><b>Note: We will be closed for the 4th of July.</b></span></div>Bing bang boom, bob’s your uncle.