Help background image class?

[afterthestorm]

Hey there! So, I've been playing around with BBcode+ and all that. I'm trying to work on having a background image in the class/css coding, but it's not working out too well.

[class=header]
margin-left: auto;
margin-right: auto;
background-image: url("https://i.imgur.com/0OOuxxS.gif");
border: solid 2px white;
border-radius: 40px;
height: 223px;
max-width: 400px;
overflow: hidden;
[/class]

[div class=header]      [/div]

Also, I've been trying to have a hover on the BBcode that appears over the background image with some words, but definitely confusing. I have a pretty good understanding of the general BBcoding, but this BBCode+ stuff kinda confuses the heck out of me. Bits and pieces I understand due to my small amount of knowledge on Html and Css. So yeah, help with this would be great.

 

[Alteras]

You need background-image: url('https://i.imgur.com/0OOuxxS.gif');, not ""

What specifically is confusing you about the hover?

 

[afterthestorm]

Ah! Thank you for replying quickly.

I think I get that you have to use the class name and state=. I'm just stumped on how you add the words to it. When I tried to it didn't work.

 

[Alteras]

ah, you'd want to make a different class and a different div that occupies that space.

 

[afterthestorm]

Please elaborate on that?

 

[Alteras]

You can make another div inside the header div, give it width: 100%, height: 100%, and then give it the opacity: 0 for the one without a state, and opacity: 1 for the one with a state.

 

[afterthestorm]

Example please?

 

[Alteras]

[class=header] margin-left: auto; margin-right: auto; background-image: url('https://i.imgur.com/0OOuxxS.gif'); border: solid 2px white; border-radius: 40px; height: 223px; max-width: 400px; overflow: hidden; [/class] [class name=text] position: relative; width: 100%; height: 100%; overflow-Y: scroll; overflow-X: hidden; opacity: 0; transition: opacity 1s; color: white; background-color: rgb(0,0,0,0.7); [/class] [class name=text state=hover] opacity: 1; [/class] [div class=header] [div class=text] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate ut mauris et lacinia. Sed iaculis consequat ligula. Maecenas efficitur, leo in egestas consectetur, dolor mi pretium sem, in luctus libero ex a nunc. Vivamus pharetra ligula id accumsan lobortis. In quis nulla elit. Etiam ultricies rutrum urna ut efficitur. Nam sit amet ipsum mauris. Donec eget nulla et sem lacinia condimentum sit amet tristique libero. Aenean non turpis non velit interdum convallis. Sed suscipit felis sit amet tellus volutpat, quis dictum libero aliquam. Nulla sit amet dignissim sapien, elementum vehicula erat. Nullam iaculis purus non accumsan ultrices. Vivamus ullamcorper mi neque, ut pretium lectus posuere non. Mauris sit amet dui congue dolor ultrices fermentum sed eget mi. In hac habitasse platea dictumst. Morbi eu est in arcu aliquet interdum. Etiam orci ligula, feugiat sit amet ante in, condimentum fringilla turpis. Sed erat dui, cursus vitae rhoncus in, volutpat et dui. Suspendisse lorem tellus, mollis at cursus non, dignissim vitae diam. Sed at commodo purus. Sed finibus tortor dapibus erat pulvinar, quis tempor diam tempor. Nulla sit amet neque lacus. Quisque id imperdiet ante. Nulla quis vulputate erat. Vestibulum vel eros nec magna sollicitudin tempus. Etiam vitae quam sed mauris luctus pellentesque. Sed non libero blandit, auctor magna sed, aliquam ante. Integer interdum nec odio vel pharetra. Sed facilisis dignissim accumsan. Proin quis massa libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies tortor id leo malesuada maximus. Quisque ante risus, porta ut quam a, tincidunt iaculis ligula. Cras posuere, urna quis porttitor efficitur, arcu orci porttitor nisl, nec gravida ex dolor vitae velit. Sed commodo, arcu ultrices porttitor varius, leo eros venenatis est, in fringilla felis enim gravida est. Vivamus accumsan auctor lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel felis ut felis tempor tristique sit amet vel arcu. Aliquam scelerisque neque dolor, ut ultricies odio fermentum eu. Proin porta tortor turpis, quis porttitor quam tempus a. [/div][/div]

[nobr][class=header]
margin-left: auto;
margin-right: auto;
background-image: url('https://i.imgur.com/0OOuxxS.gif');
border: solid 2px white;
border-radius: 40px;
height: 223px;
max-width: 400px;
overflow: hidden;
[/class]

[class name=text]
position: relative;
width: 100%;
height: 100%;
overflow-Y: scroll;
overflow-X: hidden;
opacity: 0;
transition: opacity 1s;
color: white;
background-color: rgb(0,0,0,0.7);
[/class]

[class name=text state=hover]
opacity: 1;
[/class]

[div class=header]
[div class=text]
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate ut mauris et lacinia. Sed iaculis consequat ligula. Maecenas efficitur, leo in egestas consectetur, dolor mi pretium sem, in luctus libero ex a nunc. Vivamus pharetra ligula id accumsan lobortis. In quis nulla elit. Etiam ultricies rutrum urna ut efficitur. Nam sit amet ipsum mauris. Donec eget nulla et sem lacinia condimentum sit amet tristique libero. Aenean non turpis non velit interdum convallis. Sed suscipit felis sit amet tellus volutpat, quis dictum libero aliquam. Nulla sit amet dignissim sapien, elementum vehicula erat. Nullam iaculis purus non accumsan ultrices.

Vivamus ullamcorper mi neque, ut pretium lectus posuere non. Mauris sit amet dui congue dolor ultrices fermentum sed eget mi. In hac habitasse platea dictumst. Morbi eu est in arcu aliquet interdum. Etiam orci ligula, feugiat sit amet ante in, condimentum fringilla turpis. Sed erat dui, cursus vitae rhoncus in, volutpat et dui. Suspendisse lorem tellus, mollis at cursus non, dignissim vitae diam. Sed at commodo purus. Sed finibus tortor dapibus erat pulvinar, quis tempor diam tempor. Nulla sit amet neque lacus. Quisque id imperdiet ante. Nulla quis vulputate erat. Vestibulum vel eros nec magna sollicitudin tempus. Etiam vitae quam sed mauris luctus pellentesque.

Sed non libero blandit, auctor magna sed, aliquam ante. Integer interdum nec odio vel pharetra. Sed facilisis dignissim accumsan. Proin quis massa libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies tortor id leo malesuada maximus. Quisque ante risus, porta ut quam a, tincidunt iaculis ligula. Cras posuere, urna quis porttitor efficitur, arcu orci porttitor nisl, nec gravida ex dolor vitae velit. Sed commodo, arcu ultrices porttitor varius, leo eros venenatis est, in fringilla felis enim gravida est. Vivamus accumsan auctor lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel felis ut felis tempor tristique sit amet vel arcu. Aliquam scelerisque neque dolor, ut ultricies odio fermentum eu. Proin porta tortor turpis, quis porttitor quam tempus a. 
[/div][/div][/nobr]

 

[afterthestorm]

Oh! I understand now. The example make's a lot more sense now. Thank you for the help! (: