Placing images inside a div causes them to vanish

I encountered a strange issue where the images I added to a background disappeared.

.Background1{
    position:relative;
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    content:url("/assets/backgroundlayer1.jpg")
}
.Background2{
    position:absolute;
    top:35%;
    left:25%;
    height:75%;
    width:50%;
}
<div class="Background1" name="Background1" id="Background">
 <img class="Background2" name="Background2" id="Background" src="/asset/Background2.png">
</div>

Edit: My goal is to make background2 fit on background1.

htmlcssangular

Answer №1

It is recommended to utilize the background-image attribute instead of the content attribute. By using the content attribute, it may potentially override the existing content within your div element, resulting in the removal of the image.

.CustomBackground{
    position:absolute;
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    background-image:url('/assets/custombackground.jpg')
}

Answer №2

There are a couple of issues with your code. Instead of calling the background image using content, you should be using the background property.

Check out more about the CONTENT PROPERTY and the BACKGROUND PROPERTY.

Another mistake is that you're trying to assign a percentage for height in a position:relative element where it's not allowed. You need an absolute definition like px or pt:

.Background1{
    position:relative;
    top:0%;
    left:0%;
    height:600px;
    width:100%;
    background:url("/assets/backgroundlayer1.jpg") no-repeat;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The feature of Jquery click and cursor: pointer only focuses on a single element at a

Recently, I created a navbar that includes a dropdown feature. I encountered an issue where I wanted the dropdown to show up when clicking on the navbar-profile class (which contains the profile picture, name, and chevron icon) in the top right corner. Ho ...

jqueryhtmlcss

What are the steps to view my HTML webpage on a smartphone?

Recently, I successfully created an HTML webpage with CSS and JS that looks and functions perfectly on my PC. However, when attempting to access it on my phone, I encountered some issues. Despite transferring all the necessary files to my phone, only the ...

javascriptandroidhtmlcss

How can I populate a select dropdown list in Django using JsonResponse?

I've been working on displaying a list from my Django application in an HTML select option, but I'm having trouble getting it to show up. Also, I believe I need to assign IDs to the option values in the select list, but I'm not sure where to ...

pythonhtmldjangoajax

Guide for displaying SQL data in an HTML table

I am currently working on transferring my SQL data to an HTML format. The code I have so far is not functioning as expected. I attempted to include HTML within my PHP code, and now I am considering if it would be better to do it the other way around (emb ...

phphtmlmysqlsql

"Unveiling the Intricacies of DOM Event Subscriptions with *ngIf

My preference is to handle DOM events as an observable stream, utilizing filter, concatMap, etc. similar to the example below. @Component({ template: `<button #btn>Submit<button`, selector: 'app-test', }) class TestComponent impleme ...

angularrxjs

Using jQuery to retrieve the domain extension from a URL

Seeking assistance with extracting domain extensions from various URLs using jQuery. Uncertain how to account for all possible scenarios. Here are the parts of the URL that need to be extracted: https://www.amazon.**com**/dp/067144901X https://www.amazon. ...

javascriptjqueryhtmlurl

How to prevent the animation from triggering when changing the theme

Currently, I am developing a game that is similar to the concept of . In my game, I have implemented both dark and light themes along with animations that are triggered when the API sends a response (such as flipping a div and changing the background col ...

cssreactjsanimationmaterial-ui

Utilizing Angular 2 for Displaying SVG Information

I am facing an issue with my angular application where I need to display product information in a SVG image obtained from a service in JSON format. Despite trying different methods, I have been unsuccessful in rendering the image on the HTML template. Att ...

angularsvgdata-binding

Issue with Bootstrap carousel: image protrudes past boundaries of parent container

Struggling with setting up a bootstrap carousel on my page. I want the image to extend beyond the parent div, positioned at the bottom rather than the top. How can I achieve this without disrupting the default carousel behavior? Here's a sketch of how ...

javascripthtmlcsstwitter-bootstrapcarousel

The art of masonry is not effective

I'm having trouble getting the Masonry cascading grid layout library to work in my code. Stylesheet: .post { background: #FFF; padding: 10px; border-bottom: 3px solid #e6e6e6; width: 30.7%; margin: 10px; } Source code: <div ...

javascriptjqueryhtmlcssmasonry

The REST API seems to be functioning correctly when accessed through Postman, but there are issues when attempting to call

When I include @PreAuthorize("hasRole('ROLE_SUPER_ADMIN')") in my controller and make a call from Angular, it doesn't work. However, it works fine when called from Postman. @GetMapping("/getAllOrgniz") @PreAuthorize("hasRole('ROLE_SUPE ...

angularspring-bootspring-security

Conceal the unstyled element and reveal its adjacent sibling?

I have come across some HTML code that I am unable to modify. Instead of using JS/jQuery, I prefer a solution with cross-browser compatible CSS. The structure of the HTML is as follows: <ul class="list"> <li class="item"> <a hr ...

htmlcsshtml-lists

CSS-WHAT Package for Angular Update - Enhance Your Styles!

In my Angular setup, the configurations are as follows: _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | ...

angularnpm

Concealing a hyperlink depending on the value chosen in a dropdown menu

Looking for guidance on how to use jQuery to read the current value of a drop-down list and hide a specific link based on that value. The drop-down list is for selecting the language/locale. For example, when "English" is selected, I want the link to be h ...

javascriptjquerycsslocaleaspdotnetstorefront

Encountering an issue in Angular 4 AOT Compilation when trying to load a Dynamic Component: Error message states that the

My Angular application is facing challenges when loading dynamic components. Everything works smoothly with the JIT ng serve or ng build compilation. Even with AOT ng serve --prod or ng build --prod, I can still successfully build the application. Lazy loa ...

angulartypescriptcompiler-errorsangular-cliaot

The comparison between AJAX and JSON passing and PHP generating HTML versus returning it

Currently, my code looks like this: <li onclick = " function CBAppData( callerObj, data ) { var string = ''; for( a in data ) { debug.push( data[ ...

phpjavascripthtmlajax

The Super Sub menu is failing to display correctly as intended

I encountered an issue while trying to create a Super sub-menu. The problem is that the super sub-menu appears when I hover over the main menus, instead of the sub-menus. I suspect there may be something wrong with the display: none; attribute, but I' ...

htmlcsscss-selectors

Leveraging jQuery for Adding Text to a Span While Hovering and Animating it to Slide from Left to

<p class="site-description">Eating cookies is <span class="description-addition"></span>a delight</p> <script> var phrases = new Array('a sweet experience', 'so delicious', 'the best treat', ...

javascriptjqueryhtml

Error Arises When Making Selection in PrimeNG's P-ListBox Component

Whenever I choose an item from my listbox module, I encounter an error where the value is being returned as an object instead of an array in my listbox.js file from p-listbox by PrimeNG. HTML: <p-listbox formControlName="programType" [options]="phoneT ...

angularprimeng

Tips on transforming data stored in an array into a nested array structure using Angular 13

Just starting out with Angular and I'm looking to convert my data into a nested array format in Angular 13. If anyone has a StackBlitz example, that would be greatly appreciated! This is the data I've retrieved from a random API: "data& ...

angularmultidimensional-arraynested-loopsangular13angular-loopback