I'm having trouble displaying an image in a section of my website.
Below is the CSS code for that specific section:
#start{
height: 100vh;
display:block;
text-align: center;
}
.start-img{
background-image: url("assets/img/bg.png");
display:block;
}
.section{
height: 100vh;
}
And here is the corresponding HTML:
<section id="start">
<div class="strt-img">
</div>
</section>
In order to display the background image in your .strt-img div, you must specify a height for it.
The reason why the background image is not appearing is because the div has no content, causing it to collapse. Once you add some content such as a paragraph or any element within the div, the background image will be visible.
In order to ensure proper display, you must specify a height since there is no content present. You can try adding something like: height: 100px;.
Alternatively, if you want the element to fill the background of its section, apply position: relative; to the sections and then use the following CSS:
.strt-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
This will stretch the element to match the width and height of the section.
UPDATE:
#start {
height: 100vh;
display: block;
text-align: center;
}
.start-img {
background-image: url("http://via.placeholder.com/1000x500");
display: block;
height: 100%;
}
.section {
height: 100vh;
}<section id="start">
<div class="start-img">
</div>
</section>In a row, I have two columns, each containing their own row. When the page width hits the 'xs' break-point, the left column's row will stack its columns on top of each other. The right column is taller than the left column, which leaves a l ...
I have successfully created a nested list with buttons added to each parent <li> element. Here is how the list is structured: $("#pr1").append("<button id='bnt-cat13' class='buttons-filter'>expnd1</button>"); $("#pr ...
I am attempting to style an input field with a FormControl using the :invalid pseudo-class. Here is my code snippet: scss input:invalid { background-color: red; } html <input type="text" [formControl]="NameCtrl"> Unfortunate ...
I recently encountered an issue while attempting to create a mouseover effect that would display a larger image when hovering over a smaller default image. The problem arose when the larger image started flickering uncontrollably upon hover. Check out the ...
I have created a sticky form that is fixed at the bottom of the page. How can I reduce the gaps in this sticky form? between the input field and the button between the button and the frame between the input field and the frame Here is the link t ...
I have developed a parametric mixin that utilizes a unique "node-value" system to locate the children of an element. The process involves detecting the children through a loop function named ".extractArrays", which contains ".deliverChild" within it. Subse ...
Is there a way to center the output/result of the HTML code below both horizontally and vertically on the web page using CSS? I have tried the following code but it only centers the output horizontally. Vertical alignment is not working properly. Can someo ...
I have been attempting to extract transaction records from the following website: . While researching on stack overflow, I came across a possible solution that involves using urllib.request and selenium.webdriver to retrieve and render a webpage. Here&ap ...
Utilizing bootstrap jumptron with a background image has led to an issue where the background image disappears as I scroll down, leaving only the jumptron div class displaying the heading. How can this be fixed so that the image remains visible even when s ...
I need help with creating a unique menu design for my website. On the desktop site, I want to display "username/password/sign in" buttons, while on the mobile responsive version I only want to show a single "sign in" option that redirects users to the sign ...
Being a French speaker, I apologize in advance for any mistakes I might make. I am also fairly new to Angular, so if you could provide detailed explanations in your responses, it would be greatly appreciated. Thank you. I am trying to import a custom CSS ...
Is there a more efficient way to display over 500 images from a folder on an HTML page without the need to manually write out each img src tag? I have searched online for solutions, but most suggestions involve using PHP or "glob", which I am hesitant to ...
I have managed to figure out most aspects of these circles except for how to arrange them side by side. Currently, they are stacked on top of each other. I have successfully determined the colors, fonts, text positions, and other details with some assistan ...
Hey Developers! I have been using the following commands in footer.phtml to retrieve all my cms/blocks in the Magento's footer. <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('home')->toHtml() ...
Trying to convert a website into a phonegap app is proving to be challenging for me. When I send a request to the server, it responds with the HTML content as text. My goal is to extract certain HTML elements from this text and then append them to a div in ...
Previously, I inquired about implementing a show/hide functionality for a div that only renders when a specific link is clicked. (View the original question) Following some advice, I was provided with jQuery and AJAX code to achieve this: function unhide() ...
I am having trouble printing the nivo slider (default-theme): Despite trying for a few days, I still can't figure out why it's not working. I have attempted solutions like #slider { visibility: visible; width: 950px; height: 35 ...
Just diving into the world of bootstrap and I'm puzzled as to why my simple multiselect options aren't responding when clicked. UPDATE The first multiselect option on the test-site linked below is the one giving me trouble. I've tried it o ...
I'm struggling to get my footer to stay at the bottom of a page that requires scrolling. The code I have only seems to work on pages without scrolling, causing the footer to display in the middle of the page instead of at the bottom where it belongs. ...
Bootstrap operates based on the class assigned to the parent element for flex row/column behavior. .bd-highlight { background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .15); } <link href="https://stackpath.bootstrapcdn.co ...