How to get Summernote to overlay an Image

Kwasi Denkyira

I am creating an application in mvc and using Summernote Editor. I need my Summernote Editor to overly an image similar like what they have on the Summernote landing page -https://summernote.org/

@section Scripts
{

}

Any help will be appreciated.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
Okk,
suppose the height of the banner is 300px; (consider this as 100%, as it is parent div)
then make the top of Summernote 280 px; (80%) and left 50%
so your CSS could be something as
body, html {
    height: 100%;
}

.note-editor {
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("yourUrl.jpg");
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
#summernote
{
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
test it and let me know.
0
Kwasi Denkyira5y ago
Hi Sachin
Thanks for your resposne. I think I didn't use the right description. I need the text editor to be a little on the Image. Like this Image.You can see the Editor is a little on the Image. That is what I am looking for

0
Sachin Singh5y ago
The overlay is achieved when you make your parent block element's position fixed.
look as this
https://www.w3schools.com/howto/howto_css_overlay.asp
0