I am attempting to insert an image onto my website, however, I am encountering issues with the code I have written:
div#planet {
z-index: -10;
width: 450px;
height: 549px;
position: absolute;
background: url("https://example.com/images/planet.jpg") no-repeat top center;
top: -75px;
right: -450px;
}<div id="planet"></div>Check out this awesome fiddle that works perfectly.
https://jsfiddle.net/Sampath_Madhuranga/4qtum631/4/
#planet {
z-index: 9;
width: 100%;
height: 549px;
background: url("http://heroic.cosmicpvp.com/images/planet.jpg") no-repeat;
background-size:cover;
background-position:top center;
}<div id="planet"></div>@Akrion and @Dr M J made a valuable point in the comments, pointing out that the positioning of top and right was causing the <div> to be pushed off the page.
The solution is to simply remove those two lines of code:
div#planet {
width: 450px;
height: 549px;
z-index: -10;
background: url("http://heroic.cosmicpvp.com/images/planet.jpg") no-repeat top center; */
}
It's unclear why the right and top properties were set to negative values. This seems to be shifting the viewport -75 from the top and -450 from the right, essentially moving it off screen.
Removing these should make the background image visible as intended.
div#planet {
z-index: -10;
width: 450px;
height: 549px;
position: absolute;
background: url("http://heroic.cosmicpvp.com/images/planet.jpg") no-repeat top center;
margin: 0;
}
#cosmic-planet {
width: 450px;
height: 549px;
z-index: -10;
background: url("http://starry.cosmicdesigns.com/images/cosmic-planet.png") no-repeat top center; /* this image will enhance the design */
}
I am currently in the process of redesigning a website for a client. The site is already built using Joomla 1.7, but I am facing an issue with the articles section that was created by the client using a WYSIWYG editor. The problem lies in the messy code st ...
By setting a z-index of -3 for several divs in my background, I thought they wouldn't affect the formatting of elements in the foreground. But now I'm facing an issue where I can't click on those background divs when trying to target them wi ...
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 ...
Utilizing Intel's app framework means there is no .datepicker method available. The following code snippet generates the date widget within my app: <label for="startdate">Start Date:</label> <input type="date" name="startdate" id="star ...
I recently stumbled upon some interesting articles that explain how to customize various elements of Twitter Bootstrap using LESS. You can check out one of the articles here and find more information about Twitter Bootstrap here. However, I am still unsure ...
When a user clicks on a link to slide the div down, I want it to automatically scroll to the bottom of the div. I've attempted to use scrollTo and animate methods to achieve this effect. $('html, body').animate({ scrollTop: $("#elementID") ...
Is there a way to create a menu tree using just HTML and some scripting, without downloading additional software? I tried searching on Google but all the results require downloads. Can anyone provide guidance or help with this task? Thank you in advance. ...
Using Bootstrap 4, a navigation tab is created. However, upon loading the page, the home tab is automatically loaded but not highlighted. Clicking on any tab will highlight it correctly, but once clicked anywhere else on the page, the highlight disappears. ...
Is there a way to update the Contact Us form in Div without redirecting to another thank you page after submission? I want to replace the contact form in that Div with a "Thank You" message upon successful validation. Any suggestions or demo/download code ...
I am in the process of developing a web application that I intend to integrate into my Wix website. The main components of the required web application are a text screen and a button to switch between different screens/pages (html content). However, I am ...
I'm currently facing an issue with my HTML page that contains input fields. I'm using PHP to validate the data and insert it into my MySQL Database named 'fantasymock'. Despite successful validation, the data does not get written into t ...
I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am ...
Having a bit of trouble with my div element not wrapping all the way down. To simplify things, I've applied borders and background colors to everything. Here's the HTML code... I could resort to adding a float left to the page-wrapper div as a w ...
It's puzzling that I have to click the submit button on my form twice before it triggers the save function below. My HTML is written in Pug format. Below is a snippet of my HTML template: <form ng-submit="save()"> <div class="form-group" ...
After making updates to a client's website, I'm encountering an issue where the browser is displaying a cached version of the site. The website consists of static .html files. Although clearing my browser's cache resolves the issue for me, I ...
I put together an Express application quickly, here's how it looks: const express = require("express"); const app = express(); const port = 3000; app.get("/content/1/", (req, res) => res.send("Thinking about taking out a new loan? Call us today. ...
Struggling to create a scrolling table with CSS? When using overflow-y : auto, the <td> tag becomes overloaded in the <tr> element. Take a look at the example code below to see the HTML and CSS in action: HTML CODE : <table id="check" cla ...
I'm having trouble positioning the Facebook login button in my header. It keeps appearing far to the left and below other links :) I'm currently testing it on this page: My goal is to have the button display just to the left of the login link a ...
I'm puzzled by the behavior of the CSS code provided, which is also demonstrated in this fiddle. <style type="text/css"> p { font-size: 14px; } .percentage { line-height: 150%; } .em-and-a-half { line-height: 1.5em; } .decimal { ...
Check out my fiddle here: http://jsfiddle.net/jd5pgdz2/4/ I encountered an issue when attempting to add a user with the same name as one already in my table (the displayed users are static in the HTML). Despite using 'contains' to check if the u ...