How can I bring my div to the foreground with its background color?

JNC

#Preface I am relatively new to HTML and CSS if this has been answered elsewhere I would appreciate direction to something that gives me a solution.

Below is the code I have, I want the .Divclass to appear infront of my backround element with it's red background.

* {
  background-image: url(https://www.pixelstalk.net/wp-content/uploads/2016/05/Treugolnik-triangle-illuminati-Wallpapers-High-Resolution.jpg);
        
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 1960px 1080px;
}

.divclass {
  height: 230px;
  width: 300px;
  margin: 0px;
  padding: 0px;
  color: red;
  border: solid 1px rgb(253, 253, 253);
  text-align: center;   
  font-size: x-large;
}
Abin Thaha

Check the below snippet. The div is in front of the background image with a red background.

Let me know if this is what your desired output is

section {
  background-image: url(https://www.pixelstalk.net/wp-content/uploads/2016/05/Treugolnik-triangle-illuminati-Wallpapers-High-Resolution.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 1960px 1080px;
  padding: 10px;
}


.divclass {
  height: 230px;
  width: 300px;
  margin: 0px;
  padding: 0px;
  background-color: red;
  border: solid 1px rgb(253, 253, 253);
  text-align: center;   
  font-size: x-large;
}
<section>
  <div class="divclass">Hi</div>
</section>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can I bring my text to the front and leave the image on the background?

How can I update the background color of my div or any element by using Color Picker

How can I update the font size and background color of my Tooltip and make its icon smaller?

How can I change the color of my facet label (strip.background) to be the same as its bars?

How can I make it so that the background color and foreground color of a QLabel are different? (PyQt5)

How can I bring the Kivy window to the foreground in a Kivy desktop app?

How can I bring Electron app to foreground every "N" minute?

How do i change the background foreground and border color in WPF when hovering with my mouse

How can I give background color to the text content inside a div in my html page.

How to suspend and bring a background process to foreground

How can I override the default mousepressed background color of all JButtons into a darker shade of its current background color?

How can I bring my button to front

how to bring background color dynamically

How can I keep my application in the foreground?

How can i change the full background of my div inside a div

How can I make my CSS grid even with the background color?

How can I filter my rows by background color in Google Sheets?

How do I bring a Python script's output to foreground/background in Linux?

How do I bring a polygon to the foreground in OpenGL?

In Xamarin, how can I change the background color of a button for just 1 second and return it again to its original color?

How can I adjust the color of a fixed element to its background elements color?

How do I bring color to my dwm status bar?

How can I position my div at the bottom of its container?

Q: AngularJS, How can I put images into my background div?

How can I make my gradient background cover the whole div?

How can I stop my parallax div having a blurred background?

Linux process to background - relogin - how to bring process back to foreground?

Phonegap - Bring from background to foreground

How can I detect when the swift application is foreground from the background?