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

Limit users to entering either numbers or letters in the input field

How can I enforce a specific sequence for user input, restricting the first two characters to alphabets, the next two to numbers, the following two to characters, and the last four to numbers? I need to maintain the correct format of an Indian vehicle regi ...

javascriptregexangulartypescriptangular9

Setting the minimum and maximum width of the MenuItem (popover) in Material-UI based on the width of the select component

I need the popover width to always match the width of the select component, regardless of the length of the text in the menu items. Setting autoWidth to either true or false is not providing a solution. Below is the code for the select component: import ...

cssreactjswidthmaterial-uihtml-select

Implementing a collapsible full-width button that contains multiple elements (Bootstrap)

I am currently in the process of developing a responsive calendar that will display additional information in an expandable "well" when the user clicks on a specific event. My goal is to have the button, date, and icon all appear on the same line at full ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

I find myself stuck in one component in Angular routing, unable to navigate away from the current URL

After developing a function that retrieves the value of an item and redirects to a different component based on certain logic, here is the code snippet: navigate_to_page(url) { console.log(url) console.log(['../' + url]) th ...

angular

Issue with bootstrap: the navbar highlight and anchor href are not functioning as intended

I'm currently working on creating a Navbar and implementing the navbar highlighting feature using the active bootstrap class. Below is the code I have tried: <!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap CSS ...

htmlcssbootstrap-5

Can a container be sized based only on the width of one of its children?

Take a look at this snippet of html: <div class="container> <div class="header"> </div> <div class="content"> </div> <div class="footer"> </div> </div> I am aiming for the containe ...

htmlcss

How can we best understand the concept of custom directives using the link method?

As a beginner in AngularJS, I am looking to implement an autocomplete feature for text input. My JSON data is stored in JavaScript and I need help simplifying the process. Can you provide me with a straightforward solution? The specific requirement is to ...

javascripthtmlangularjs

iPhone - touchstart event not functioning in JavaScript

Looking for a solution to dynamically resize a div in JavaScript when clicking on a link element (<a>). However, the code doesn't seem to function properly on my iPhone. Let's start with a basic link: <a href="#" onfocus="menu()">ME ...

javascripthtmlioscssiphone

Having trouble with importing and receiving the error message "Module 'clone' not found."

When trying to use clone.js in Angular 2, I imported it with import * as clone from 'clone'. It was listed in my package.json dependencies and successfully imported into node_modules. However, when viewing the output, I encountered the error mes ...

javascriptangularnpm

Concealing or revealing an image with jQuery when hovering

I currently have 3 <a> tags within my html, each containing 2 images. Specifically, the greyscale images are the ones that are visible while the colored ones are set to display:none. I am aiming to achieve a functionality where upon hovering over th ...

javascriptjqueryhtmlcss

How to successfully implement ng-show with Html5's <dialog> tags

It's incredible how simple Html5 dialogs are. It feels like they should have been here 15 years ago! I'm having trouble getting ng-show to work with dialogs. Any tips on how to make it happen? <!DOCTYPE html> <html ng-app="project"> ...

angularjshtmldialog

Ways to make the Select component in Material-UI lose its focus state once an item has been selected

Anticipated outcome: Upon selecting an item, the Menu list will promptly close, and the Select component will no longer display a focus state. The borderBottom will change to 1px solid, and the backgroundColor will turn to white. Current situation: Sele ...

cssreactjsfocusmaterial-uihtml-select

Merging two arrays that have identical structures

I am working on a new feature that involves extracting blacklist terms from a JSON file using a service. @Injectable() export class BlacklistService { private readonly BLACKLIST_FOLDER = './assets/data/web-blacklist'; private readonly blackl ...

javascriptangular

What is the best way to design a shape (a quadrilateral with rounded edges) using CSS?

Struggling with creating a widget in React Js that has an image as the background? The image is designed to be dynamic, changing color and size based on the device. I've attempted using inline SVG and SVG within an img tag but can't seem to contr ...

htmlcssreactjssvgcss-shapes

Verify whether the current location is within the circle

I am conducting a test to determine if my current location falls within a given radius of 300m. If it does, return true; otherwise return false. Below is the code I am currently using: <body> <button onclick="getLocation()"> ...

javascripthtmlwebgeolocationmaps

The form embedded within the <tr> element seems to be malfunctioning

Hey there, I'm facing a little issue with my form that is nested inside a table content. It seems to not be working properly. Let me share the code snippet below: <table> <form name='editpo' method=POST action='js_buat_po.php? ...

htmlformshtml-table

Is it possible to conceal or disregard text elements from the web browser search function by using CTRL+F?

I have a complex web application interface with a dedicated area for content display. Is there a way to ensure that when users utilize the browser's text search function (CTRL+F), the UI elements are ignored and only the actual content is searched? ...

javascripthtmlcss

I am having trouble getting ngFor to properly render my accessible data. Whenever I attempt to use it, it ends up breaking my code. Can someone please

When using *ngFor to iterate through data, everything appears to be working fine until attempting to access nested data within an object inside another object. For example: { "tvshow": [ { "id": "value", "time": { "clock": "valu ...

javascriptangulartypescript

Utilizing pure CSS to target the first and last classes

I want to use pure CSS to select only the first and last classes throughout the entire document. In my scenario, the structure looks like this: <div class="Container"> <div> <div class="Parent"></div> <pre> ...

csscss-selectors

Error occurred during SCSS rendering process: [Internal Error: Unable to locate or read the specified file.]

When trying to create a website using scss, I encounter an error every time I save the scss file. Strangely, after saving it multiple times, the file will render properly. Although this issue is minor, it really bothers me. I have searched for a solution ...

csssass