I am trying to give a background image to a div element, but the code I have written doesn't seem to be working:
body, html{
height: 100%;
}
.mount{
position: relative;
height: 100%;
}
.mount::before{
content: "";
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
border-radius: 50%;
background-color: orange;
background-image: url(Image\mountain.png);
}<div class="mount">If you're aiming to achieve a circular shape in the background image, it might not be straightforward by using a regular background-image directly on the DIV. However, utilizing a pseudo-element as demonstrated can get the job done:
To implement this technique, simply include z-index: -1; to position the pseudo-element behind its parent and specify the background-position and/or size if necessary:
body,
html {
height: 100%;
}
.mount {
position: relative;
height: 100%;
}
.mount::before {
content: "";
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
border-radius: 50%;
background-color: orange;
background-image: url(https://placehold.it/400x400/fa4);
background-position: center center;
z-index: -1;
}<div class="mount">
<p>sample text here.</p>
<p>more sample text here.</p>
</div>Here is an example of attaching an image using :before
If the image is not displaying, please double check your folder name and image file name.
Feel free to reach out if you need any further clarification.
.mount{
position: relative;
height: 100%;
margin-top:150px;
}
.mount::before{
content: "";
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
border-radius: 50%;
background-color: orange;
background-image: url(http://via.placeholder.com/350x150);
background-position: center;
background-repeat: no-repeat;
background-position: center;
background-repeat: no-repeat;
z-index:-1;
} <div class="mount">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>I have a fixed container that contains another container with multiple DIVs based on user choices. I want these DIVs to align horizontally to allow for horizontal scrolling, without any vertical scrolling. For example: [x] [x] [x] Here is a simplified ve ...
Is there a way to maintain the static 'BUY NOW' tag on an image while allowing other elements to be dynamic? Any suggestions on how to achieve this within an img tag?https://i.sstatic.net/6eLoN.jpg ...
I have been working on implementing the module pattern in JavaScript, but for some reason, the scroll event is not firing as expected. Can anyone help me figure out what is wrong with the code? Here is an example: var modBrandHeader = (function ($) { ...
I have a solution for achieving equal height columns using the CSS property display:table. Here is an example: .row { display: table; width: 100%; } .col{ display: table-cell; } However, in my case, I am using flexbox and the row class has ...
Dealing with Bootstrap 4 grid challenge in IE11 when using a fixed width column I am working on a three-column grid where the middle column needs to have a fixed width, while the left and right columns are flexible/wrappable. Here is the code snippet I h ...
Here is the HTML content within my Sharepoint 2010 Web Part project: <html> <h1>Travel Form Assistance</h1> <div id="preTravel" name="preTravel"> <h2>Pre Travel</h2> <img id="imgPreTravel" name="imgPreTra ...
As a newcomer to HTML, CSS, and bootstrap, I am struggling with updating my stylesheet values in the preview. This is the button tag that I am working with: <button class="btn btn-primary btn-xl">Find out More</button> However, when ...
I'm working on a JavaScript function that can convert input values to text. However, I am facing an issue as I only want to convert data from one specific row into plain text. Each row in my table has 5 cells along with a button for saving the data. I ...
Currently revamping my website using a template and editing the content with notepad++. Struggling to display a success message on the contact me page after form submission. The issue arises when I submit information in the text boxes and click submit, it ...
Utilizing two pseudo elements ::before with different border properties (refer to js fiddle), contrary to the rule that states "you can use only one ::before and one ::after pseudo element," this approach surprisingly worked. How is this possible? https:/ ...
I am excited about using react-native to have a TextInput aligned with a MaterialIcons.Button in the same line. I have been trying to center these elements horizontally but haven't been successful with the code below: import React from 'react&apo ...
I am generating buttons dynamically. <form action="/" method="post"> <table cellpadding="4"> <% List<Room> rl = (List<Room>) request.getAttribute("roomList"); if(rl != null) { ...
It's important for me to avoid using xpaths that rely on 'xpath position'. This is because if a new element is added to the page, the xpath may change and cause automation tests to fail. However, there are some web pages where the only xpat ...
Is there a special CSS or Javascript trick that can be used to mark the preferred line break locations in HTML text when it becomes crowded? I am looking for a solution to optimize line breaks in cramped text areas. Any suggestions? ...
I have been attempting to extract the data from a video file in binary format using the FileReader.readAsBinaryString(Blob|File) method, as demonstrated in this example http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files. My intention i ...
Received data from the server is in HTML format. I need to show it on my Text View with proper formatting such as bold, font style, etc. How can I achieve this? Thank you in advance ...
I'm just starting out in the world of JavaScript and I have a query: is there a method to retrieve a list of files that were loaded by the browser during the last request? To clarify, when a browser loads a webpage, it not only downloads the HTML fil ...
https://i.sstatic.net/OvAN9.png I've customized a material ui TextField component by increasing the font size of the label. However, I'm facing an issue where the gap in the border for the label remains unchanged despite the larger text size. I ...
I added a glyphicon element to my page but set its visibility to hidden using CSS. My goal is to reveal the glyphicon (#gl1) when users input text and click the "post" button, but I'm encountering an issue where the glyphicon doesn't show up when ...
The problem lies in the images: https://i.sstatic.net/rydNO.png Here is an example of desktop resolution: https://i.sstatic.net/uv6KT.png I need to use default size pictures (800x450px) on the server. This means I have to resize and crop them with CSS to ...