Hey guys, I’m relatively new t coding, as in- I just started a few days ago and have been perusing something to make for my little sisters forum journal which allows ‘div’ codes.
Attached at the bottom is how it is working, a sample code. Essentially, I want the background image to be half opacity, but the text ontop of it to maintain its usual opacity. However, every attempt to use what google-fu has taught me either removes the image or doesnt change the opacity.
Any one know a solution?
(and yes, my code is dreadful)
<center>
<div style="width:250px;text-align:right;color:#E5BD09;font-family:impact;font-size:18px;padding-bottom:-15px;letter-spacing:2px;">
DONUT
</div>
<div style="width:220px;height:auto;padding:15px;border:dotted 1px black;border-right:solid 5px #E5BD09;border-left:solid 5px #E5BD09;color:#372D2A;font-weight:bold;font-face:veranda;text-align:center;span:auto;background-image: rgba (0,0,0,0.5), url ("https://i.pinimg.com/736x/0f/6e/a6/0f6ea6fd5a869c6adde7acec5cabc942--cute-girly-wallpaper-cute-girly-backgrounds.jpg");">
<left>
<u>DATE TEST.</u>
</left>
TEST TEST TEST TEST TEST TEST
</div>
<off-topic>
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block. </off-topic>
The third example in my Codepen show how to do this.
It is, but you can improve. <center> is an obsolete “presentational” element, a throwback to the days before CSS. Don’t use it, it’s the job of CSS to define these things. It’s also missing it’s closing tag. <left> I don’t think that ever was an HTML element, if it was, it’s a dead as the center element.
Using the style attribute to add in-line styling is another 90s style throwback which is best avoided in this millennium.
Get up to date, use HTML 5, use CSS for styling and Validate everything.